Css 简明教程

CSS - bottom Property

CSS 中的 bottom 属性用于设置定位元素的底部位置。它指定元素底部边缘与包含元素的底部边缘之间的距离。

基于 position 属性的值，可以确定 bottom 属性的效果。

Position value

Bottom property

absolute or fixed

指定元素底部边缘的外边距与容器底部边缘的内边框之间的距离。

relative

指定元素的底部边缘与其正常位置移动的距离。

sticky

用于计算粘性约束矩形。

static

不影响元素。

Possible Values

  1. <length> − 可以指定负值、零值或正值。

  2. <percentage> − 容器高度的百分比。

  3. auto − 默认值。浏览器计算底部位置。

Applies to

所有 HTML 定位元素。

DOM Syntax

object.style.bottom = "2px";

CSS bottom - With Absolute Position

以下是 position:absolute 和底部具有不同值（自动、百分比、长度）的示例：

<html>
<head>
<style>
   div.blockbottompostion {
   bottom: 10%;
   background-color: yellow;
   position: absolute;
   height: 100px;
   border: 3px solid rgb(12, 5, 62);
   }
</style>
</head>
<body>
   <h1>The bottom Property</h1>
   <p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
   </p>
   <p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
   </p>
   <div class="blockbottompostion">Position:absolute bottom:10%</div>
</body>
</html>

CSS bottom - With Relative Position

以下是 position:relative 和底部具有不同值（自动、百分比、长度）的示例：

<html>
<head>
<style>
   div.blockbottompostion {
   bottom: 10%;
   background-color: yellow;
   position: relative;
   height: 100px;
   border: 3px solid rgb(12, 5, 62);
   }
</style>
</head>
<body>
   <h1>The bottom Property</h1>
   <p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
   </p>
   <p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
   </p>
   <div class="blockbottompostion">Position:relative bottom:10%</div>
</body>
</html>

CSS bottom - With Fixed Position

以下是 position:fixed 和底部具有不同值（自动、百分比、长度）的示例：

<html>
<head>
<style>
   div.blockbottompostion {
   bottom: 10%;
   background-color: yellow;
   position: fixed;
   height: 100px;
   border: 3px solid rgb(12, 5, 62);
   }
</style>
</head>
<body>
   <h1>The bottom Property</h1>
   <p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
   </p>
   <p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
   </p>
   <div class="blockbottompostion">Position:fixed bottom:10%</div>
</body>
</html>

CSS bottom - With Sticky Position

以下是 position:sticky 和底部具有不同值（自动、百分比、长度）的示例：

<html>
<head>
<style>
   div.blockbottompostion {
   bottom: 10%;
   background-color: yellow;
   position: sticky;
   height: 100px;
   border: 3px solid rgb(12, 5, 62);
   }
</style>
</head>
<body>
   <h1>The bottom Property</h1>
   <p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
   </p>
   <p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
   </p>
   <div class="blockbottompostion">Position:sticky bottom:10%</div>
</body>
</html>

CSS bottom - With Static Position

这里有 position:static 和bottom具有不同值（自动、百分比、长度）的示例 −

<html>
<head>
<style>
   div.blockbottompostion {
   bottom: 10%;
   background-color: yellow;
   position: static;
   height: 100px;
   border: 3px solid rgb(12, 5, 62);
   }
</style>
</head>
<body>
   <h1>The bottom Property</h1>
   <p>This<br />is<br />tutorialspoint<br />site,<br />and,<br />has,<br />many,<br />many<br />courses.
   </p>
   <p>This<br />site<br />has<br />abundant,<br />material,<br />on,<br />all,<br />skills.
   </p>
   <div class="blockbottompostion">Position:static bottom:10%</div>
</body>
</html>