[分享]css中定位方式的区别

CSS中定位方式有三种，分别是静态定位（static）、相对定位（relative）和绝对定位（absolute）。静态定位是默认的定位方式，元素的位置由文档流决定，无法通过top、bottom、le...

CSS中定位方式有三种，分别是静态定位（static）、相对定位（relative）和绝对定位（absolute）。

静态定位是默认的定位方式，元素的位置由文档流决定，无法通过top、bottom、left、right属性进行调整。

div {
  position: static;
} 

相对定位相对于元素在文档流中的位置进行定位，可以通过top、bottom、left、right属性进行微调，并不会影响其他元素在文档流中的位置，其他元素的位置也不会对它有影响。

div {
  position: relative;
  top: 10px;
  left: 20px;
} 

绝对定位是相对于最近的非static定位的祖先元素进行定位，如果没有非static定位的祖先元素，则相对于body元素进行定位。可以通过top、bottom、left、right属性进行细致的定位，对其他元素的位置有影响。

div {
  position: absolute;
  top: 50px;
  right: 0;
} 

以一个简单的网页排版为例，如果我们需要将标题定位在页面的中心上方，并将正文放在标题的下面，可以这样实现：

header {
  position: relative;
  text-align: center;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

p {
  position: relative;
  top: 100px;
} 

使用CSS的定位方式，可以让我们在网页排版时更加自由灵活，实现各种各样的布局。