用CSS改变元素位置，掌握网页布局的灵魂

前端

2023-12-02 10:46:25

同级元素之间的位置关系

同级元素是指在同一个父元素下的元素，它们之间的位置关系可以通过以下属性来控制：

display：该属性决定元素的显示方式，可以取值有block、inline、inline-block等。
float：该属性可以使元素浮动，可以取值有left、right、none等。
position：该属性可以使元素脱离正常的文档流，可以取值有static、relative、absolute、fixed等。

父子元素之间的位置关系

父子元素是指一个元素是另一个元素的子元素，它们之间的位置关系可以通过以下属性来控制：

position：该属性可以使元素脱离正常的文档流，可以取值有static、relative、absolute、fixed等。
top、right、bottom、left：这四个属性可以设置元素相对于其父元素的距离。
margin：该属性可以设置元素的边距。
padding：该属性可以设置元素的内边距。

CSS定位示例

我们通过一个简单的例子来说明CSS定位是如何工作的。

<div id="parent">
  <div id="child1">子元素1</div>
  <div id="child2">子元素2</div>
</div>

#parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

#child1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

#child2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 50px;
}