css定位之bottom属性的用法笔记

原创 国哥笔记  2018-11-07 19:59  阅读 912 views 次

bottom属性定义及用法

在css中,bottom属性是用来设置定位元素相对于底边移动的距离,必须用在定位元素中,对于非定位元素(postion:static;),bottom属性没效果。

  • bottom属性用在固定定位元素(position:fixed;)时:设置的是相对于浏览器的底部边缘,元素向上移动的距离;
  • bottom属性用在绝对定位元素(position:absolute;)时:设置的是相对于非static的最近父元素的底部,元素向上移动的距离;
  • bottom属性用在相对定位元素时(position:relative;)时:设置的是相对于元素正常位置,元素向上移动的距离;
  • bottom属性用在粘性定位(position:sticky)时:bottom表现为当元素在视口内时它的位置是相对的,当它在外部时它的位置是固定的(参照以上相对定位和固定定位)。

bottom属性语法格式

  1. css语法:bottom: auto / % / length / inherit;(例:bottom:10px;)
  2. JavaScript 语法: object.style.bottom="auto / % / length / inherit";

bottom属性值说明

  • auto :浏览器自己计算元素底部的位置(默认值);
  • %:百分比,可使用负值(例:bottom: -30%;);
  • length:单位长度(单位:px、cm等),可使用负值(例:bottom: -100px;);
  • inherit:从父元素继承bottom属性的值。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css定位之bottom属性的用法笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}.abc{height:60px;width:300px;border:1px solid red;position:relative;}
#a,#b,#c{width:30px;height:30px;border:1px solid cadetblue;}#a{position:fixed;bottom:500px;}
#b{position:absolute;bottom:50px;} #c{position:relative;bottom:12px;}
</style>
</head>
<body>
<div class= "abc"><div id = "a">1</div></div>
<div class= "abc"><div id = "b">2</div></div>
<div class= "abc"><div id = "c">3</div></div>
</body>
</html>

运行结果:

css定位之bottom属性的用法笔记图1

 

没有使用bottom属性之前对比图:

css定位之bottom属性的用法笔记图2

非常相关

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-bottom.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情