定位vs浮动
- 可以让某个元素自由的在某个盒子内移动,并且能压住其他的盒子。
- 让某个元素固定在页面某个位置
浮动可以让多个块级盒子没有缝隙的并排显示,经常用于横向布局盒子。
定位则是可以让某个元素在某个盒子里面自由移动,并且可以压住其他的盒子。
定位的组成
定位= 定位模式 + 偏移。
定位模式
-
static:
对象遵循常规流。此时4个定位偏移属性不会被应用。(这个静态定位就是按照标准流布局的,没有边偏移)
-
relative:
对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
-
absolute:
对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到
body
元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。 -
fixed:
与
absolute
一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。 -
center:
与
absolute
一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3) -
page:
与
absolute
一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute
模式。(CSS3) -
sticky:
对象在常态时遵循常规流。它就像是
relative
和fixed
的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed
。该属性的表现是现实中你见到的吸附效果。(CSS3)
边偏移
top bottom right left .
相对定位 relative
选择器 {position:relative}
相对定位是 移动元素原来的位置 进行偏移
特点:
- 参照点是自己原来的位置
- 和浮动不一样的是,自己虽然移动了 ,但是还是会按照标准流的位置。(不脱标,继续占标准流位置)
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
.box1 {
background-color: pink;
position: relative;
top: 25px;
left: 50px;
}
</style>
</head>
<body>
<div class="box1">
盒子1
</div>
<div>盒子2</div>
</body>
绝对定位 absolute
选择器 {position:absolute}
绝对定位是 移动元素祖先元素位置 进行偏移
特点:
- 如果父元素没有定位(标准流/浮动的盒子)或者没有父元素,则以浏览器为准定位
- 如果祖先元素有定位(绝对,相对,固定),则以最近一级的有定位的祖先为参考点移动位置。
- 标准流的位置, 是脱离标准流的。
自绝父相
我们使用定位的时候我们要使用一个口诀,子元素绝对定位,父元素相对定位。
- 子元素使用绝对定位的为了不占标准流的位置,
- 而父元素使用相对定位一来是限制子元素,
- 二来是占用标准流的位子。
结语
假期的第一天