CSS入门篇（position属性 定位）

CSS

• 百度不在便捷，图片全部失效请多包涵。
• 前言
• 1.relative（相对定位）
• • 1.1作用
  • 1.2特点：
• 2.absolute（绝对定位）
• • 2.1 作用
  • 2.2特点
• 3. fixed（固定定位）
• • 3.1作用
• 4.sticky（磁贴/粘性/吸附定位）
• • 4.1作用
  • 4.2特点
• 5 static（常规/静态/自然定位）
• • 5.1作用
  • 5.2特性
• 总结

百度不在便捷，图片全部失效请多包涵。

前言

前面我们说过了CSS的浮动和清除浮动的方法。本篇的内容主要讲述position定位。后续还会有JS 的篇章。

开始前我们先来了解一下这几个属性：

属性	意	值
top	定义了元素的上顶部与其包含块顶部之间的偏移	auto（默认值），%，px、cm 或inherit（继承）
left	定义了元素的左边界部与其包含块左边界之间的偏移	auto（默认值），%，px、cm 或inherit（继承）
right	定义了元素的右边界部与其包含块右边界之间的偏移	auto（默认值），%，px、cm 或inherit（继承）
bottom	定义了元素的底部部与其包含块底部之间的偏移	auto（默认值），%，px、cm 或inherit（继承）
z-index	设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。	auto（默认值），数值，inherit（继承）
position	规定元素的定位类型	看下个表

position属性值：

值	意
static	常规/静态/自然定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	磁贴/粘性/吸附定位
inherit	继承（不是定位方式）

1.relative（相对定位）

1.1作用

是元素成为定位的参照物，官话：可定位的祖先元素。

1.2特点：

1.能使用 top/right/bottom/left/z-index进行定位。

2.相对定位的元素不会脱离常规流（相对自身原位置进行偏移）。

3可以使浮动元素发生偏移，并且控制他们的堆叠顺序。

4.任何元素都能设置为relative（相对定位）。设置relative（相对定位）的绝对定位后代，以父元素进行定位。（绝对定位中测试）

我们用两个实验来看看

测试1(三个高宽为80px的div，第2个设置相对定位，且偏移量为，顶部偏移10px，左边偏移-10px，)：

position:relative;
top:10px;
left:-10px;
           

复制即可 ：

<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">1</div>
<div style="position:relative;top:10px;left:-10px; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #f00; ">2</div>
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">3</div>
           

效果：

可见：第二个div 是从原位置进行偏移，且原位置保留。

测试2（两个设置左浮动并且设置相对定位高宽80px的div，第2个div 设置左偏移-80px， ）：

position:relative;
left:-80px;
           

分别把第一个div和第二个div设置z-index值(设置边框为1，颜色各不同。)；

z-index:1;
z-index:10;
           

我们用第二个div测试 ：

<div style="z-index:1; position:relative; float: left;  width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">1</div>
<div style=" z-index:10; position:relative;float: left;  left:-82px; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #f00; ">2</div>

           

第一个div的z-index:1;第二个div的z-index:10;

第一个div的z-index:10;第二个div的z-index:1;

2.absolute（绝对定位）

2.1 作用

使元素脱离常规流。

2.2特点

1.脱离常规流，能使用 top/right/bottom/left/z-index进行定位。

2.设置尺寸要注意！百分比是以谁为参照物最近定位祖先元素（如果没有定义祖先元素，以body为参照物）。

3.不设置宽高 top/right/bottom/left值都为0时，填充最近定位祖先元素。

4. top/right/bottom/left值都为0时，外边距设置 auto auto；（居中效果！！）

5.如果没有定义祖先元素，以body为参照物。

我们用两个实验来看看

测试1(三个高宽为80px的div，第2个设置绝对定位，且偏移量为，顶部偏移10px，左边偏移-10px，)：

position:absolute;
top:10px;
left:-10px;
           

复制即可 ：

<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">1</div>
<div style="position:absolute;top:10px;left:-10px; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #f00; ">2</div>
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">3</div>
           

效果：

可见：第二个div 是从最近定位祖先元素（如果没有定义祖先元素，以body为参照物），原位置不保留。

测试2（在原有基础上添加一个div，宽为100px；外边距auto；定位方式:相对定位；）

<div style="width:100px; margin: auto; position: relative; border: 1px solid #000;"> 
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">1</div>
<div style="position:absolute;top:10px;left:-10px; width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #f00; ">2</div>
<div style="width: 80px;height: 80px;line-height: 80px;text-align: center; border: 1px solid #000; ">3</div>
</div>
           

可见：第二个div 是从最近定位祖先元素（也就是设置了相对定位的div），原位置不保留。

3. fixed（固定定位）

3.1作用

相对于浏览器窗口进行定位。

请自行测试一下！！

<div style="width:400px; height: 2000px; background-color: #ff0;"> 
	<div style=" width: 100px; height: 100px; position: fixed; top: 50px; left: 0px; background-color: #0ff;">
		广告
	</div>
</div>
           

4.sticky（磁贴/粘性/吸附定位）

4.1作用

制造出吸附效果

4.2特点

1.如果产生偏移，原位置还会在常规流中。

2.如果它的最近祖先元素有滚动条，那么它的偏移标尺就是最近的祖先元素。

2.如果它的最近祖先元素没有滚动条，那么它的偏移标尺就是浏览器窗口。

自行测试

<div style="width:400px; height: 2000px; background-color: #ff0;"> 
	<div style="width:100%; height: 100px;  background-color:#0f0;"> 图</div>
	<div style=" width: 100%; height: 100px; position:sticky; top: 0px;  background-color: #0ff;  ">
		导航
	</div>
</div>
           

5 static（常规/静态/自然定位）

5.1作用

常规流特性

5.2特性

1.无法使用 top/right/bottom/left/z-index进行定位。

2.在其它定位后使用，会让其它定位全部失效。

总结

本篇我们讲述了定位的几种方法，static是比较特殊的定位。因为 固定定位和吸附定位定位需要滚动条。截图不能完美体现效果，请自行测试。

css 属性检测 CSS 定位

如本文章描述有误请尽快联系博主！感谢您的阅读与帮助！