[分享]css中定位属性有哪几种

CSS中的定位属性有哪几种在CSS中，定位属性用来控制元素在网页中的位置。CSS中有三种常用的定位属性：static、relative、absolute和fixed。1. static定位所有的HTM...

CSS中的定位属性有哪几种
在CSS中，定位属性用来控制元素在网页中的位置。CSS中有三种常用的定位属性：static、relative、absolute和fixed。
1. static定位
所有的HTML元素的默认position属性值都是static。在static定位中，元素的位置是由HTML文档流决定的，无法通过top、left等属性来调整元素的位置。一般情况下，static定位很少使用。
2. relative定位
relative定位可以通过top、left等属性来相对于元素原来的位置进行调整。相对于它自身原来的位置移动，而不会破坏文档流。如果一个元素设置了relative定位，而没有设置top、left属性，那么它的位置不会发生任何变化。
示例代码：

p {
  position: relative;
  top: 20px;
  left: 30px;
} 

以上代码意味着将段落元素向下移动20像素，向右移动30像素。
3. absolute定位
absolute定位和relative定位的区别在于absolute定位是相对于包含它的元素来定位的，而不是相对于元素本身定位。如果一个元素设置了absolute定位，那么它的位置不会占用空间，也不会破坏文档流。absolute定位常用于创建图像浮动在文本之上或者对话框的显示等。
示例代码：

#container {
  position: relative;
}
p {
  position: absolute;
  top: 20px;
  left: 30px;
} 

以上代码中，container的position设置为relative，p的position设置为absolute，top和left属性相对于container元素进行调整。
4. fixed定位
fixed定位同样不会占用空间，且位置固定不变，不管网页怎么滚动。fixed定位常用于创建固定在网页底部或顶部的导航栏或其他界面元素。
示例代码：

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
} 

以上代码意味着将footer元素固定在网页底部，它会覆盖住下方的内容，这样就创建了一个浮动的footer。
总结：
以上四种CSS定位属性在网页布局和界面设计中都有广泛的应用。掌握它们的使用方法和特点，可以让你的网站看起来更专业和美观。