CSS bottom
CSS中的
bottom属性用于指定垂直定位元素的底部位置。它不会影响未定位的元素。它是
left、right和
top 的四个偏移属性之一。
此属性的效果取决于相应偏移量的位置。元素，即
position 属性的值。当
position 属性设置为值
static 时，
bottom属性不受影响。
语法
bottom: auto | length | percentage | initial | inherit;
属性值
此属性的值定义如下：
auto：这是默认值。
length：此值定义
底部属性的位置，以px，cm，pt等表示。
percentage：此值以百分比（％）定义
底部属性的位置。计算得出元素包含块的高度。
initial：它将属性设置为其默认值。
inherit：它从其父元素继承属性。
此属性对除值
static 之外的已定位元素的影响如下：
当元素固定或绝对定位（即position: fixed;和position: absolute;）时，bottom属性指定元素的右边缘与其包含块的右边缘之间的距离。
如果元素相对定位（即 position: relative; ），则bottom属性会将元素的顶部边缘从其正常位置移到上方/下方。
如果position设置为sticky，即position: sticky;，则定位上下文是视口。当元素在视口中时， bottom 属性的行为就像其位置是相对的。当元素位于外部时，bottom属性的行为就像其位置是固定的。
现在，让我们通过一些示例来了解此属性。
示例
在此示例中，有4个绝对定位的div元素。我们正在向他们应用
bottom属性。带有
bottom: initial和
bottom: auto; 的div元素会重叠，因为它们具有相似的尺寸和默认值。
此处，
bottom属性是在
px 和
em 中定义的。
<!DOCTYPE html>
<html>
<head>
<title>
CSS bottom Property
</title>
<style>
div{
position: absolute;
width: 150px;
height: 150px;
font-size: 30px;
}
#len {
bottom: 200px;
border: 5px solid green;
}
#em {
bottom: 1em;
border: 5px solid blue;
}
#auto {
bottom: auto;
border: 5px solid red;
}
#init {
bottom: initial;
border: 5px solid darkviolet;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1> Example of the bottom Property </h1>
<div id = "len"> bottom: 200px; </div>
<div id = "em"> bottom: 1em; </div>
<div id = "auto"> bottom: auto; </div>
<div id = "init"> bottom: initial; </div>
</body>
</html>
输出
示例-使用负值
在此示例中，有四个相对放置的div元素。我们将
底部属性应用于带有负值的属性。在这里，
底部属性的负长度值在
px 和
em 中定义。
<!DOCTYPE html>
<html>
<head>
<title>
CSS bottom Property
</title>
<style>
div{
position: relative;
width: 150px;
height: 150px;
font-size: 30px;
}
#len {
bottom: -150px;
border: 5px solid green;
}
#em {
bottom: -17em;
border: 5px solid blue;
}
#auto {
bottom: auto;
border: 5px solid red;
}
#init {
bottom: initial;
border: 5px solid darkviolet;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1> Example of the bottom Property </h1>
<div id = "len"> bottom: -150px; </div>
<div id = "em"> bottom: -17em; </div>
<div id = "auto"> bottom: auto; </div>
<div id = "init"> bottom: initial; </div>
</body>
</html>
输出
