CSS的position属性_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

CSS的position属性_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

position属性的定义和用法:
检索或设置对象的定位方式。
设置此属性值为absolute 会将对象拖离出正常的文档流而不考虑它周围内容的布局。假如其他具有不同z-index属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有margin，但仍有padding和边框border。
要激活对象的绝对定位，不但要设置此属性值为absolute，而且必须指定left，right，top，bottom属性中的至少一个。否则上述属性会使用他们的默认值auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
设置此属性值为relative 会保持对象在正常的HTML流中，但是会根据对象本身原来的位置进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。
对应的脚本特性为position。
语法结构:

position：static | relative | absolute | fixed

取值:
static:无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用，默认值。
relative:对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
absolute:对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed:对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6不支持此属性值。
浏览器支持:
IE浏览器支持此属性。
火狐浏览器支持此属性。
谷歌浏览器支持此属性。
opera浏览器支持此属性。
注意:IE6不支持fixed属性值。
继承性:
没有继承性。
实例代码:
实例一:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>position属性-蚂蚁部落</title><style type="text/css">.mytest{  width:200px;  height:100px;  border:1px solid blue;  position:static;  top:40px;}</style></head><body>  <div class="mytest">蚂蚁部落欢迎您</div></body></html>

static是对象的默认定位值，无任何特殊定位，所以top属性将会被忽略。
实例二:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>position属性-蚂蚁部落</title><style type="text/css">.parent{  width:300px;  height:300px;  border:1px solid #606;}.first{  width:100px;  height:100px;  border:1px solid blue;  position:relative;  top:30px;}.second{  width:100px;  height:100px;  border:1px solid #606;}</style></head><body><div class="parent">  <div class="first">我是第一个孩子</div>  <div class="second">我是第二个孩子</div></div></body></html>

first对象进行相对定位，它所相对的元素就是它自己本身的位置。而second的对象不会受到first对象的影响，依然会呆在它原来的地方。
实例三:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>position属性-蚂蚁部落</title><style type="text/css">.grandfather{  width:400px;  height:400px;  border:1px solid green;  position:relative;}.parent{  width:300px;  height:300px;  border:1px solid #606;}.first{  width:100px;  height:100px;  border:1px solid blue;  position:absolute;  bottom:50px;}.second{  width:100px;  height:100px;  border:1px solid #606;}</style></head><body><div class="grandfather">  <div class="parent">    <div class="first">我是第一个孩子</div>    <div class="second">我是第二个孩子</div>  </div></div></body></html>

以下代码可以看出绝对定位对象的参考对象并非都是body或者它的最近得父对象，而是距离它最近的带有position属性并且属性值不为static的父对象。下面的first对象就是以grandfather作为偏移参考对象的。
实例四:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>密码强度提示功能-蚂蚁部落</title><style type="text/css">.grandfather{  width:400px;  height:400px;  border:1px solid green;  position:relative;}.parent{   width:300px;   height:300px;   border:1px solid #606;}.first{  width:100px;  height:100px;  border:1px solid blue;  position:fixed;  bottom:50px;}.second{  width:100px;  height:100px;  border:1px solid #606;}</style></head><body><div class="grandfather">  <div class="parent">    <div class="first">我是第一个孩子</div>    <div class="second">我是第二个孩子</div>  </div></div></body></html>

postion的fixed定位永远是以body作为偏移参考对象的。

原文地址是:CSS的position属性一章节。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。