HTML粘性定位,CSS：position——绝对、相对、固定、粘性定位的简单记录

一、相对定位——relative

有偏移量(left、right、top、bottom)时，元素相对于自身进行偏移，元素不脱离文档流(在原位置还占有空间)，不影响其他元素布局。

#one{

width: 50px;

height: 50px;

background: orangered;

border: 1px solid #000;

}

#two{

width: 50px;

height: 50px;

background: hotpink;

border: 1px solid #aaaa7f;

position: relative;

top: 10px;

opacity: 0.5;

}

#three{

width: 50px;

height: 50px;

background: skyblue;

border: 1px solid #5c5c5c;

}

二、绝对定位——absolute

有祖先元素时，当祖先元素有了任一position(绝对、相对、固定)，且子元素设置为绝对定位后，子元素相对于当前的祖先元素进行偏移；子元素会脱离文档流(后面的div会覆盖上来)；绝对定位使内联元素支持宽高(块特征)，使块元素的默认宽根据内容决定(内联特征)。

#father{

width: 250px;

height: 200px;

border: 1px solid #FFD47F;

position: relative;

}

#one{

width: 50px;

height: 50px;

background: orangered;

border: 1px solid #000;

position: absolute;

right: 20px;

top: 0px;

}

#two{

width: 50px;

height: 50px;

background: hotpink;

border: 1px solid #aaaa7f;

opacity: 0.5;

}

#three{

width: 50px;

height: 50px;

background: skyblue;

border: 1px solid #5c5c5c;

}

三、固定定位——fixed

使元素脱离文档流，使内联元素支持宽高，使块元素的默认宽根据内容决定；相对于整个浏览器窗口进行偏移，不受浏览器滚动条影响。

fixed

四、粘性定位——sticky

在指定位置，进行粘性操作。

sticky