Css 简明教程

CSS - bottom Property

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

The bottom property in CSS is used to set the bottom position of a positioned element. It specifies the distance between the bottom edge of the element and the bottom edge of its containing element.

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

Based on the value of the position property, the effect of bottom property, is determined.

Position value

Bottom property

absolute or fixed

Specifies the distance between element’s bottom edge’s outer margin amd the inner border of the container’s bottom edge.

relative

Specifies the distance the element’s bottom edge is moved above its normal position.

sticky

Used to compute the sticky-constraint rectangle.

static

No effect on the elements.

Possible Values

  1. <length> − Can specify a negative, null or positive value.

  2. <percentage> − Percentage of the container’s height.

  3. auto − Default value. Browser calculates the bottom position.

Applies to

所有 HTML 定位元素。

All the HTML positioned element.

DOM Syntax

object.style.bottom = "2px";

CSS bottom - With Absolute Position

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

Here is an example with position:absolute and bottom having different values (auto, percent, length) −

<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 和底部具有不同值（自动、百分比、长度）的示例：

Here is an example with position:relative and bottom having different values (auto, percent, length)−

<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 和底部具有不同值（自动、百分比、长度）的示例：

Here is an example with position:fixed and bottom having different values (auto, percent, length)−

<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 和底部具有不同值（自动、百分比、长度）的示例：

Here is an example with position:sticky and bottom having different values (auto, percent, length)−

<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具有不同值（自动、百分比、长度）的示例 −

Here is an example with position:static and bottom having different values (auto, percent, length)−

<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>