css bottom属性使元素位置相对固定

bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。
简单来说 bottom:5px;就是对一个元素进行定位，它的位置参照的谁让这个元素距离参照物底部5px的距离保持不变，参照物变大变小都不会影响它的相对位置。
示例：

<style>
#div1{position: relative;height: 200px;width: 80%;background-color: skyblue;}#div2{position: absolute;bottom:10px;height: 30px;width: 100%;background-color: lightgreen;}</style>
<div id="div1"><div id="div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面</div>
</div>

效果如图：

绿色div始终在距离蓝色div底部10px的位置。
注意：蓝色div宽度80%是相对于body，而绿色div是absolute绝对定位，参照蓝色定位来设置的，宽度100%即相对于蓝色div所占的百分比。

css bottom属性使元素位置相对固定相关推荐

css如何让浮动的元素占位,CSS visibility 属性使元素占位，但不可见
二.快速起步(Mysql镜像) 1.登录镜像站点 docker login daocloud.io 用户名密码邮箱 1.1 拉取镜像 docker pull [option] name:[tag] ...
html怎么设置z值,使用CSS z-index属性调整元素的方法
使用CSS z-index属性调整元素的方法发布时间:2020-08-27 14:57:29 来源:亿速云阅读:76 作者:小新小编给大家分享一下使用CSS z-index属性调整元素的方法,希 ...
css中如何调整元素位置
我们通常把样式层叠表叫做css,它是用来修饰html内容的,给内容加各种各样的样式和效果. 那么在写实际项目过程中经常会遇到一个普遍性问题:就是调整元素的位置如果只对于初学编程的人来说,只能用css ...
温习CSS之如何使元素居中对齐
1.文本水平居中文本对齐方式:text-align:left|center|right text-align:center 可以让行内元素或者行内块元素居中,属性加在父元素上面,该父元素必须是块级元 ...
CSS常用属性速查表
属性太多,对于我这种不深入WEB的人员,还是有个速查表方便多了,注意利用开头的目录,会不断更新的 CSS 字体属性(Font) 属性描述 CSS font 在一个声明中设置所有字体属性. 1 f ...
CSS样式属性参考手册
CSS3 动画属性(Animation) 属性描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性. ...
css定位属性详解（position属性）
一.定位属性 1.定位属性属性:position 取值: 1.static ...
CSS vertical-align属性的用法
vertical-align的定义 W3C上对vertical-align的定义:vertical-align 属性设置元素的垂直对齐方式.该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐. ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
css属性 margin right,css margin-right属性怎么用
css margin-right属性定义及用法在css中,margin-right属性是使用来设置元素的右外边距,属性值可以是负数.如果我们需要同时设置元素的上下左右的外边距,我们可以使用margi ...

css bottom属性使元素位置相对固定

css bottom属性使元素位置相对固定相关推荐

最新文章

热门文章

css bottom属性 使元素位置相对固定

css bottom属性 使元素位置相对固定相关推荐

最新文章

热门文章

css bottom属性使元素位置相对固定

css bottom属性使元素位置相对固定相关推荐