(本文参考慕课网视频教程CSS-position 并加以总结)
一、absolute与float,relative的关系
注:
- absolute和float不能同时存在,对float元素添加absolute会去除浮动;对absolute元素使用float无效。
- relative和absolute不是兄弟关系,是对立的分离的,absolute离开relative使用会更加强大
- 独立的absolute可以摆脱overflow的限制,无论是隐藏还是滚动
二、absolute与float
absolute与float具有相同的特性:包裹性和破坏性。(所以在很多页面布局中可以相互替换)
1)所谓包裹性指:父元素的宽度会收缩到和内部元素宽度一样。
例如:<p style="background-color:yellow">css你大爷</p>
这里p的宽度是撑满整个屏幕的。
加上absolute之后,p的宽度恰好是内容的宽度:<p style="background-color:yellow;position:absolute;">css你大爷</p>
2)破坏性:
未使用absolute时,父元素内容是撑开的,使用absolute父元素高度塌陷
例:
html部分:
<div class="box">
<img class="image" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532584565134&di=52784729fc456fab368bcb77b775760e&imgtype=0&src=http%3A%2F%2Ftva2.sinaimg.cn%2Fcrop.241.879.750.421%2F90eb2137ly1flwqqsk1m3j21kw1kin27.jpg"/>
</div>
CSS部分:
.box{
padding:10px;
background-color:#f0f0f0
}
.image{
position:absolute
}
三、relative与absolute
relative主要用于限制absolute,一旦父元素设置了relative,那么absolute子元素将相对于其父元素定位。例如要实现下面APP右上角的红圈:
通常的做法是将app图片所在的div设置为relative,将红圈设置为absolute,再设置top/right值,这样无论图片位置怎么改变,红圈位置都固定在右上角不变。
代码示例:
html:
<div class="app">
<img src="http://d.hiphotos.bdimg.com/wisegame/wh%3D72%2C72/sign=75641176f11f4134e0620d791733a2f8/f11f3a292df5e0fe4a5f0594506034a85fdf72e4.jpg"/>
<span class="icon">1</span>
</div>
css:
.app{
display:inline-block;
position:relative;
margin:20px
}
.icon{
background-color:#f00;
color:#fff;
border-radius:50%;
text-align:center;
position:absolute;
width:20px;
height:20px;
right:-10px;
top:-10px
}
这种依赖于relative的绝对定位,当布局需要调整,父元素的尺寸需要作出改变时,图标就会错位。所以应该充分利用absolute自身的特性,无论父元素如何改变,上面的图标都会牢牢固定。
对上面的例子作简单改进:
<div class="app">
<img src="http://d.hiphotos.bdimg.com/wisegame/wh%3D72%2C72/sign=75641176f11f4134e0620d791733a2f8/f11f3a292df5e0fe4a5f0594506034a85fdf72e4.jpg"/>
<span class="icon">1</span>
</div>
.app{
display:inline-block;
//这里父元素的relative去掉
margin:20px
}
.icon{
background-color:#f00;
color:#fff;
border-radius:50%;
text-align:center;
position:absolute;
width:20px;
height:20px;
margin:-10px 0 0 -10px //不用top和right了,改用margin进行偏移
}
三、无依赖的absolute定位
无依赖的意思:不受relative限制的absolute定位,行为表现上是不使用left/top/right/bottom任何一个属性或auto作为值。
无依赖定位的行为表现:
1. 脱离文档流:
2. 折翼的天使 :折翼的天使特性表现为去浮动、位置跟随
注:
去浮动:绝对定位后,浮动是无效的,float+absolute与直接absolute是一样的。
位置跟随:原来什么位置,之后还是什么位置。原来是block,absolute之后依然是换行显示的,原来是inline或inline-block,跟在文字后面应用绝对定位后,依然是跟在文字后面,但在IE7浏览器下元素使用绝对定位后都会inline-block化,即使它之前是block
可以配合margin进行精确定位:
1.支持负值定位
2.超赞的兼容性–IE6
四.无依赖的 absolute 最佳实践:
1、图片图标绝对定位覆盖
注:使用
<div class="header">
<div class="constr">
<div class="nav">
<h3 class="nav-list">
<a href="http://www.imooc.com/course/list" class="nav-a">课程</a>
</h3>
<h3 class="nav-list">
<a href="http://www.imooc.com/wenda" class="nav-a">问答</a>
</h3>
<h3 class="nav-list">
<a href="http://www.imooc.com/seek/index" class="nav-a">
求课<i class="icon-hot"></i>
</a>
</h3>
</div>
</div>
</div>
<div class="main">
<div class="constr">
<div class="course">
<a href="http://www.imooc.com/view/121" class="course-list">
<div class="course-list-img">
<span class="icon-recom">推荐</span>
<img width="280" height="160" alt="分享:CSS深入理解之float浮动" src="http://img1.sycdn.imooc.com/53d74f960001ae9d06000338-300-170.jpg"><!--
--><i class="icon-vip">vip</i>
</div>
<h5 class="course-list-h">分享:CSS深入理解之float浮动</h5>
<div class="course-list-tips">
<span class="l">已完结</span>
<span class="r">3514人学习</span>
</div>
</a>
</div>
</div>
</div>
css
body {
font: 14px/1.4 "Microsoft YaHei";
}
body, h3, h5 {
margin: 0;
}
img {
border: 0 none;
vertical-align: bottom;
}
.l {
float: left;
}
.r {
float: right;
}
.constr {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.header
{
background-color: #2A2C2E;
}
.nav {
height: 60px;
}
.nav-list {
float: left;
font-size: 14px;
font-weight: 400;
}
.nav-a {
display: inline-block;
line-height: 20px;
padding: 20px 35px;
color: #B5BDC0;
text-decoration: none;
}
.nav-a:hover {
color: #fff;
}
.course {
padding-top: 10px;
}
.course-list {
float: left;
width: 280px;
height: 240px;
margin: 5px 10px 15px;
border-radius: 0 0 1px 1px;
background-color: #F7FAF9;
background-color: rgba(255,255,255,1);
box-shadow: 0 1px 2px #c5c5c5;
text-decoration: none;
}
.course-list-img {
background-color: #6396F1;
}
.course-list-h {
line-height: 50px;
font-size: 14px;
font-weight: 400;
color: #363d40;
text-align: center;
}
.course-list-tips {
margin: 0 14px;
font-size: 12px;
color: #b4bbbf;
overflow: hidden;
}
.icon-hot {
position: absolute;
width: 28px;
height: 11px;
margin: -6px 0 0 2px;
background: url(http://img1.sycdn.imooc.com/545304730001307300280011.gif);
}
.icon-recom {
position: absolute;
line-height: 20px;
padding: 0 5px;
background-color: #f60;
color: #fff;
font-size: 12px;
}
.icon-vip {
position: absolute;
width: 36px;
height: 36px;
margin-left: -36px;
background: url(http://img1.sycdn.imooc.com/5453048000015d8800360036.gif);
text-indent: -9em;
overflow: hidden;
}
2.定位下拉框
3.居中、边缘定位
4.各种对齐溢出技巧实例,例如:*号时有时无对齐,图标对齐,文字溢出不够放