CSS绝对定位的应用_html/css_WEB-ITnose
前面的话
之前的博客文章已经详细介绍过绝对定位的基础知识,由于它的用途实在广泛,于是单独为其写这篇关于其应用的博客。关于绝对定位的基础知识移步至此
静态位置
当元素绝对定位后,若该元素的格式化属性不发生变化,则该元素处于静态位置。关于绝对定位元素格式化的相关内容移步至此。元素的静态位置是指元素在正常流中原本的位置,更确切的讲,顶端的静态位置是从包含块的上边界到假想框的上外边距边界之间的距离。假想框是假设元素position属性为static时元素的第一个框。
应用
以下是基于绝对定位静态位置的应用
【1】自适应位置的跟随图标
图标使用不依赖定位父级的absolute和margin属性进行定位,这样,当文本的字符个数改变时,图标的位置可以自适应
div{ height: 20px; width: 500px; line-height: 20px; margin-bottom: 30px;} i{ position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/hot.gif');}
长度可变文字
【2】视频图片上的小图标提示
一般在视频图片上的边角上都会有"自制"、"最新"、"1080p"等诸如此类的提示。使用不依赖的绝对定位属性,可以让父级元素不设置relative,拓展性更强
i{ position: absolute; width:40px; text-align: center; height: 18px; line-height: 18px; font-style: normal; background-color: orange; color: white; padding: 2px;} .box{ height: 200px; width: 200px; border: 2px solid gray;}.in{ width: 100%; height: 100%; line-height: 100px; background-color: pink; display:inline-block;}.rt{ margin-left: -44px;}.lb{ margin-top: -22px;}.rb{ float: right; margin-top: -22px; margin-left: -44px;}
自制测试内容独家 1080p 最新
【3】下拉菜单
一般地,下拉菜单作为一个组件需要使用在各种场景中,如果给组件添加relative属性,则降低了其利用率。
body{ margin: 0;} ul{ margin: 0; padding: 0; list-style: none;}input{ padding: 0; border: 0;}.box{ width: 200px; height: 38px; border: 2px solid gray;}.con{ overflow: hidden;}.input{ float: left; width: 160px; height: 38px;}.search{ width: 38px; height: 38px; float: right; background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') 0 -38px;}.list{ display:none; position: absolute; width: 158px; border: 1px solid #e6e8e9; overflow: hidden;}.in{ line-height: 30px; border-bottom: 1px solid lightblue; cursor:pointer; text-indent: 1em;}.in:hover{ background-color: #f9f9f9;}
【4】边缘对齐
很多网站都使用了边缘对齐,但好多都是用页面宽度计算出来的,当宽度变化时需要重新计算。而无依赖的绝对定位利用静态位置,无需计算就可将其位置确定,且拓展性好
body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}.box{ width: 200px; height: 100px; border: 2px solid black; background-color: lightgreen;} .out{ text-align: right;}.list{ position: absolute; margin: 10px 0 0 2px; display: inline-block;}.in{ text-align: center; width: 20px; line-height: 20px; margin-top: 4px; background-color: pink; border-radius: 50%;}
- 一
- 二
- 三
【5】星号
在很多注册或登录页面中,存在用*表示的必填项。*和*号对齐,文字和文字对齐。这种情况使用静态位置的绝对定位比较合适
body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}i{ font-style: normal; color: red; position:absolute; margin-left: -10px;}.list{ width: 100px; padding-left: 20px; border: 2px solid black; line-height: 2;}
- *手机号
- 用户名
- *密码
偏移属性
当使用偏移属性时,绝对定位元素将相对于包含块进行定位。一般地,我们仅仅使用偏移属性中的两个,且这两个属性不对立。但实际上,对立的偏移属性如left和right可以同时使用,甚至4个偏移属性都可以同时使用,并且可以达到一些意想不到的效果。以下基于绝对定位偏移属性的应用
应用
【1】全屏自适应
实现一个距离屏幕右侧200px的全屏自适应的容器层
.box{ position: absolute; top: 0; left: 0; right: 200px; bottom: 0; background-color: pink;}
【2】左右半区翻图
一些选项卡中存在右右半区的翻图效果,点击左覆盖区切换到上一张图片,点击右覆盖区切换到下一张图片。
ul{ margin: 0; padding: 0; list-style: none;}.box{ position: relative; width: 300px; height: 200px; border: 2px solid lightgray; text-align: center; font: 40px/200px '宋体'; color: white; overflow: hidden;}.list{ position: absolute; width: 400%; left: 0; top: 0; bottom: 0; transition: left 1s;}.in{ float: left; width: 25%; background-color: lightgreen;}.l,.r{ position: absolute; opacity: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.1); cursor: pointer;}.l{ left: 0; right: 50%;}.r{ left: 50%; right: 0;}.l:hover,.r:hover{ opacity: 1; transition: 1s;}
- 第1个
- 第2个
- 第3个
- 第4个
<>
var index = 0;var children = list.children;l.onclick = function(){ if(index > 0){ index --; move(index); }}r.onclick = function(){ if(index【3】九宫格
利用绝对定位的偏移属性可以制作宽高自适应的九宫格效果
ul{ margin: 0; padding: 0; list-style: none;} .list{ position: absolute; top: 0; left: 0; right: 0; bottom: 0;}.in{ position: relative; float: left; height: 33.3%; width: 33.3%; background-color: pink;}.in:before{ content: ''; position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; background-color: lightblue; border-radius: 10px;}.in:after{ content: attr(data-value); position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: 30px; margin: auto; text-align: center; font:bold 24px/30px '宋体';}
【4】等高布局
利用overflow清楚浮动的BFC的包裹性,形成一个看似等高的布局,再利用绝对定位模拟出背景和间隔线。
.box{ width: 80%; margin: auto; border: 1px solid gray; overflow: hidden; position: relative; background-color: lightgreen;}.l{ box-sizing:border-box; float: left; width: 25%; position: relative;}.r{ box-sizing:border-box; float: right; width: 75%; padding: 10px; height: 100%;}.con{ position: absolute; background-color: lightblue; border-right: 1px solid #ccc; height: 9999px; width: 100%;}.show{ padding: 10px; position: relative;}
测试文字
测试文字
测试文字
测试文字
测试文字
【5】整体布局
整体布局的思路就是利用绝对定位元素的偏移属性来替代固定定位,首先让
html,body{ height: 100%;}body{ margin: 0;}.page{ position: absolute; top: 0; bottom: 0; left: 0; right: 0;}header,footer{ position: absolute; left: 0; right: 0; height: 50px;}header{ top: 0; background-color: lightgreen;}footer{ bottom: 0; background-color: lightcoral;}aside{ position: absolute; left: 0; top: 50px; bottom: 50px; width: 250px; background-color: lightblue;}.content{ position: absolute; top: 50px; bottom: 50px; left: 250px; right: 0; overflow: auto; background-color: pink;}
推荐阅读
-
HTML5地理定位与第三方工具百度地图的应用
-
html/css中相对定位relative和绝对定位absolute的用法
-
HTML连载58-绝对定位的参考点以及注意事项
-
html/css中map和area的应用
-
css3 transform导致子元素固定定位变成绝对定位的方法
-
2020-07-11 html的rtl网站的适配 + css的pt单位应用 + JS的实现撤销和重做 + 位 字节 字符的区别
-
html/css中相对定位relative和绝对定位absolute的用法
-
html5+css3之动画在webapp中的应用
-
关于网页路径的疑惑_html/css_WEB-ITnose
-
html 关于ul标签的_html/css_WEB-ITnose