CSS bottom



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>

输出

CSS bottom_https://bianchenghao6.com_【CSS 教程】_第1张

示例-使用负值

在此示例中,有四个相对放置的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>

输出

CSS bottom_https://bianchenghao6.com_【CSS 教程】_第2张