position屬性定位

2021-09-25 18:24:31 字數 1173 閱讀 8354

1、html中有三種布局方式:標準流(順序布局)、浮動、定位(層模型)(position)

塊級元素單獨佔一行從上到下排列,行內元素共享一行

position改變元素正常的標準流,以非正常的方式脫離標準流(需要有left、right、top、bottom設定值,否則仍然是處於標準的文件流中的);後寫的元素會覆蓋掉先寫的元素,出現層的概念,

position可選的引數(定位屬性):

static:(就相當於沒有定位屬性)

relative:top、right、left、bottom相對於不同的原點進行位置的移動

absolute:top、left、right、bottom相對於網頁的四個頂點作為初始點,子絕父相,父元素帶有relative定位的屬性則子元素absolute受限制。

fixed:常用的有對聯廣告、登入彈窗`等,top、left、right、bottom相對於網頁的四個頂點作為初始點,不受父元素的限制,即使父元素帶有定位的屬性

四種定位方法中,static、relative佔位置;fixed、absolute不佔位置

inherit:繼承的是父元素的定位屬性,

1、.test*3

2、z-index只作用於帶有屬性定位的元素,子元素永遠在父元素的上方,

5、盒子模型和定位的區別:盒子靠設定margin、padding來實現元素的移動,定位通過定位屬性和left、right、top、bottom的值來實現元素的移動。

6、固定定位水平垂直居中

.contain{

width: 100%;

height: 100%;

position: fixed;

left: 0;

top: 0;

border: 1px solid blue;

.box1{

width:360px;

height:360px;

position: fixed;

left:50%;

top:50%;

margin-left: -180px;

margin-top: -180px;

border: 1px solid blue;

7、摺疊的導航欄

8、

position定位屬性

position定位屬性設定值 absolute 絕對定位 脫離原普通流 依據父級 祖先級元素的位置進行定位 如果沒有父級元素,則參照body進行定位 relative 相對定位 相對於原位置的定位,仍然佔據原先普通流的位置 static 元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,...

定位 position屬性

一.定位 position屬性 1.static 預設值 沒有定位 以標準文件流方式顯示 2.relative 相對定位 相對自身原來的位置進行偏移 top left right bottom 3.absolute 絕對定位 4.fixed 固定定位 二.相對定位元素的規律 1.設定相對定位的盒子會...

CSS 定位position屬性

div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容,即 塊框 與之相反,span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中,即 行內框 您可以使用 display 屬性改變生成的框的型別。將 display 屬性設定為 block,可以讓行內元素...