3.1 position: relative
CSS中的相对定位允许元素相对于它们在文档流中的初始位置移动。使用 position: relative 时，元素在正常流中保留其位置，但可以使用 top、right、bottom 和 left 属性进行偏移。 这些属性允许相对其常规位置移动元素。
相对定位的基本原则
在相对定位下 (position: relative)，元素从文档流中的初始位置移动。此偏移仅影响元素本身，而其他元素保持在原位，就像元素未移动一样。这可以创建元素彼此重叠或产生额外的视觉间距的效果。
语法:
.element {
position: relative;
top: value;
right: value;
bottom: value;
left: value;
}
其中:
top: 相对于其正常位置向下偏移元素right: 相对于其正常位置向左偏移元素bottom: 相对于其正常位置向上偏移元素left: 相对于其正常位置向右偏移元素<值>: 可以是CSS中任何合法的长度值 (px,%,em等)
3.2 属性 top
属性 top 相对于其初始位置向下移动元素。
top的使用示例:
CSS
.relative-top {
position: relative;
top: 20px; /* 向下移动元素20像素 */
}
使用示例:
CSS
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-top {
position: relative;
top: 20px;
background-color: lightblue;
}
HTML
<div class="container">
<div class="box static-box">这是一个普通的块</div>
<div class="box relative-top">这个块将向下偏移20px。</div>
<div class="box static-box">这是一个普通的块</div>
</div>
3.3 属性 right
属性 right 相对于其初始位置向左移动元素。
right的使用示例:
CSS
.relative-right {
position: relative;
right: 20px; /* 向左移动元素20像素 */
}
使用示例:
CSS
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-right {
position: relative;
right: 20px;
background-color: lightgreen;
padding: 20px;
}
HTML
<div class="container">
<div class="box static-box">这是一个普通的块</div>
<div class="box relative-right">这个块将向左偏移20px。</div>
<div class="box static-box">这是一个普通的块</div>
</div>
3.4 属性 bottom
属性 bottom 相对于其初始位置向上移动元素。
使用 bottom 的示例:
CSS
.relative-bottom {
position: relative;
bottom: 20px; /* 向上移动元素20像素 */
}
使用示例:
CSS
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-bottom {
position: relative;
bottom: 20px;
background-color: lightcoral;
padding: 20px;
}
HTML
<div class="container">
<div class="box static-box">这是一个普通的块</div>
<div class="box relative-bottom">这个块将向上偏移20px。</div>
<div class="box static-box">这是一个普通的块</div>
</div>
3.5 属性 left
属性 left 相对于其初始位置向右移动元素。
left的使用示例:
CSS
.relative-left {
position: relative;
left: 20px; /* 向右移动元素20像素 */
}
使用示例:
CSS
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-left {
position: relative;
left: 20px;
background-color: lightgoldenrodyellow;
padding: 20px;
}
HTML
<div class="container">
<div class="box static-box">这是一个普通的块</div>
<div class="box relative-left">这个块将向右偏移20px。</div>
<div class="box static-box">这是一个普通的块</div>
</div>
3.6 与邻近元素的互动
使用 position: relative 的元素仍在文档的正常流中，这意味着它们仍占据未偏移时的空间。这允许在不改变页面上其他元素位置的情况下移动元素。
使用示例:
CSS
.container {
border: 2px solid #000;
padding: 10px;
}
.box {
position: relative;
background-color: #e74c3c;
color: white;
padding: 20px;
margin: 10px;
width: 200px;
}
.box1 {
top: 20px;
}
.box2 {
left: 20px;
}
HTML
<div class="container">
<div class="box box1">元素 1 (向下偏移)</div>
<div class="box box2">元素 2 (向右偏移)</div>
<div class="box">元素 3 (正常位置)</div>
</div>
代码说明:
-
.box1: 元素向下偏移20像素，但其在正常流中的位置仍在，这意味着其他元素将相对于其初始位置进行定位 -
.box2: 元素向右偏移20像素，但其在正常流中的位置仍在
GO TO FULL VERSION