CSS定位详解

骑猪看日落 2022-10-25 04:44 103阅读 0赞

#### 一、CSS定位机制 ####

1.普通流  
2.浮动定位  
3.绝对定位  
除非专门指定，否则所有框都在普通流中定位。普通流中的元素的位置由元素在 HTML 中的位置决定。  
块级框从上到下一个接一个地排列  
行内框在一行中水平布置  
![display][]  
代码：

#### 二、CSSposition属性 ####

1.静态定位（static）  
一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。（普通流）  
2.绝对定位（absolute）  
（1）绝对定位的元素从文档流中拖出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 html 元素左上角作为参考进行定位。  
（2）绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。  
（3）absolute 定位使元素的位置与文档流无关，因此不占据空间。  
![absolute][]  
代码：

3.相对定位（relative）  
（1）依据left、right、top、bottom等属性在正常文档流中偏移自身位置。  
（2）可以用z-index分层设计。  
（3）移动相对定位元素，但它原本所占的空间不会改变。（普通流）  
（4）相对定位元素经常被用来作为绝对定位元素的容器块。  
![relative][]  
代码（html同上）：

.box3{ 
                width: 100px;
                height: 100px;
                background-color: chocolate;
                position: relative;
                top:50px;
                left: 50px;
                
            }

4.固定定位（fixed）  
（1）固定定位与绝对定位类似，位置与文档流无关，因此不占据空间，可层叠。  
（2）它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。（绝对定位）  
5.粘性定位（sticky）  
在 position:relative 与 position:fixed 定位之间切换，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

[display]: /images/20221024/a8f95953fab44b2eb67f945c9027e330.png
[absolute]: /images/20221024/7759e05ee34a4562b7760eee2fb272a2.png
[relative]: /images/20221024/cfdf5e3c406542e88ff8062994b67253.png