巧用 position:absolute
1、跟随性
下面这种方法更加简便以及更方便维护,
例如“西部世界”,由于不用将父元素设为position:relative,position:absolute的位置也就不用根据文字多少而重新进行top、left等位置的计算。
<div class="item1">西部世界<i></i></div>
<div class="item2">
<i></i>
<img src="data:images/orange.jpg" alt=""><!--
--><i></i>
</div>
.item1 i {
position: absolute;
background: url(images/hot.png) 0 0 no-repeat;
width: 30px;
height: 16px;
margin: -6px 0 0 2px;
}
.item2 i:nth-child(1) {
position: absolute;
background: url(images/free-appointment.png) 0 0 no-repeat;
width: 56px;
height: 56px;
margin:;
} .item2 i:nth-child(3) {
position: absolute;
background: url(images/flag_niuzhuan.jpg) 0 0 no-repeat;
width: 64px;
height: 20px;
margin-left: -64px;
overflow:hidden;
text-indent: -9em;
} /*如果用文字不用图片*/
/* .item2 i:nth-child(1) {
position: absolute;
line-height:20px;
background-color: #f60;
padding: 0 5px;
font-size: 12px;
color: #fff;
} */
2、没有宽度没有高度,实现宽高满屏效果
上图是一个全屏的遮罩层,没有定义宽和高
<div class="mask"></div>
.mask {
position: absolute;
top:;
bottom:;
left:;
right:;
background: rgba(51, 51, 51,.5);
}
position: absolute;top: 0;left: 0;width: 50%; == position: absolute;top: 0;left: 0;right: 50%; 实现距离右侧200像素的全屏自适应的容器层 position: absolute;left: 0;right: 200px;
但是width只能用css3 cale计算 position: absolute;left: 0;width: cale(100%-200px); 宽50%,上下铺满 width: 50%;position: absolute;top: 0;bottom: 0; 3、高度自适应布局
<div class="page">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
.page {
position: absolute;
top:;
bottom:;
left:;
right:;
}
.list {
background: #ECA7A5;
width: 33.3%;
height: 33.3%;
border-radius: 50%;
float: left;
position: relative;
}
4、如果尺寸限制、拉伸以及margin:auto;同时出现,就会出现绝对定位元素的绝对居中效果!
<div class="item3"><img src="data:images/orange.jpg" alt=""></div>
.item3 {
position: absolute;
left:;
right:;
width: 200px;
margin: auto;
}
巧用 position:absolute的更多相关文章
- 解决绝对定位div position: absolute 后面的<a> Link不能点击
今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...
- position absolute 绝对定位 设置问题
今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...
- 定位 position: absolute & relative
[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
- position:absolute绝对定位解读
position:absolute绝对定位解读 摘要 用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...
- position:absolute/relative/fixed小结
1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...
- css position:absolute 如何居中对齐
写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center
- 【总结】我所整理的float, inline-block还有position:absolute
这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...
- 关于position:absolute的困惑
今天在学习<精通css>时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的positi ...
- position:absolute和float会隐式的改变display类型
position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让 ...
随机推荐
- [JZOJ 5788] 餐馆
思路: 考虑树形dp. 我们设\(dp[i][j][0/1]\)表示在\(i\)为根的子树中花费\(j\)单位时间,最终回到/不必回到\(i\)的最大收益. 转移三种: \(dp[x][j][0] = ...
- 20175323《Java程序设计》第三周学习总结
教材学习内容总结 这周开始用幕布记录学习过程和思路,下面是我这章的知识框架总结https://mubu.com/doc/aNMW9Clym0 教材学习中的问题和解决过程 问题1:教材90页的Trian ...
- 05_mybatis动态sql
1.sql片段 1.sql片段**** mybatis核心 对sql语句进行灵活操作,通过表达式进行判断,对sql进行灵活拼接.组装. 2.需求 用户信息综合查询列表和用户信息查询列表总数这两个sta ...
- jsp 引入js、css修改后有缓存不及时更新
解决:(增加随机版本号) <link rel="stylesheet" type="text/css" href="css/1.css?v=&l ...
- vue 返回上一页
参考:https://www.cnblogs.com/chenguiya/p/9118265.html 注:需为history模式 方法一: @click="back" back( ...
- TortoiseGit可能遇到Permission denied (publickey).
1.检测是不是没设置公钥和私钥 2.公钥有没有添加到git账户里面去 3.检测如下图路径正确不正确
- software database is broken解决办法
ubuntu切换中文时报software database is broken错误. 网上的办法千篇一律,还都没有用.都是去应用中心删除thundbird之类的,啊....... 在终端下执行 sud ...
- 2019个人计划与Flag与期望
突然发现写博客是真的好. 希望未来能在其他地方写上日记. 总结2018中的个人缺陷: 1.忘掉了学习方法或者说学习方法不正确 2.偶尔就会去偷下懒,对自己不够严格,自控能力差. 3.心态虽比以前好很多 ...
- AM8 自定义表情包的实现方法
AM8 自定义表情包的实现方法 效果描述 AM8 安装后,在\Activesoft\AMm8\emotions 目录内存储的是默认的表情符号.但有的时候我们需要增加一些新的表情符号,AM8 系统支持自 ...
- 在DataWorks中实现指定UDF只能被指定账户访问
背景 之前写过一篇文章是关于“DataWorks和MaxCompute内部权限体系的区别”有兴趣的朋友可以点击阅读查看详情.但是还是有些同学会问,我如何在DataWorks中实现我的具体某个Resou ...