CSS - bottom 属性_CSS 菜鸟教程

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

根据位置属性的值，确定底部属性的效果。

属性值	Bottom 描述
absolute or fixed	指定元素的下边缘的外边距与容器下边缘的内边框之间的距离。.
relative	指定元素的底部边缘在其正常位置上方移动的距离。.
sticky	用于计算粘性约束矩形。
static	对元素没有影响。

当同时指定了 top 和 bottom 值时，将位置设置为绝对或固定，并且高度为 100% 或自动时，将尊重top和 bottom 距离。

当高度受到约束或位置设置为相对时，top值优先，而 bottom 值将被忽略。

可能的值

<length> - 可以指定负值、空值或正值。
<percentage> - 容器高度的百分比。
auto − 默认值。浏览器计算底部位置。

适用于

所有 HTML 定位的元素。

DOM 语法

object.style.bottom = "2px";

CSS bottom - 具有绝对位置

这是一个示例，position：absolute 和 bottom 具有不同的值（自动、百分比、长度） -

<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 - 具有相对位置

下面是一个示例，position：relative 和 bottom 具有不同的值（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 - 具有固定位置

下面是一个示例，position：fixed 和 bottom 具有不同的值（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 - 具有粘性位置

这是一个示例，position：sticky 和 bottom 具有不同的值（自动、百分比、长度）-

<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 - 具有静态位置

这是一个示例，position：static 和 bottom 具有不同的值（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>

<< CSS - z-index 属性 CSS - 导航栏 >>