Position

static(默认)
—–定位元素——
relative
absolute
fixed
sticky

static:

按照normal flow布局
left,right,top都无作用

relative:

参照物是自己原本的位置,不脱离文档流.

**应用场景:**在不影响其他元素位置的前提下,对当前元素进行微调

fixed

参照物是浏览器Viewport,元素脱离文档流,可以通过left,xxx定位

当画布滚动时,固定不动

absolute

参照物是已经定位的祖先元素，完全脱离文档流

如果找不到这样祖先元素,相对的就是视口viewport

sticky

相对定位和固定(绝对)定位的结合体
运行被定位的元素表现得像相对应为一样,直到它滚动到某个阈值点
达到这个阈值点时,它就会变成固定(绝对)定位

ex:导航栏, 平常就待在该待的位置,一滚动下拉,它一直停留在浏览器最上面

绝对定位元素特点(absolute/fixed)

随意设置宽高
宽高默认由内容决定
不再标准流的约束
- 不再严格按照从上到下,从左到右排布
- 不再严格区分块级,行内级,行内块级级的很多特性都会消失
不再给父元素汇报宽高
脱标元素的内部默认还是按照标准流布局

对于绝对定位元素:

父元素的宽度 = 绝对定位元素的宽度+left+right+margin_left+margin_right

高度同理

ex:元素垂直,水平均居中

子元素{

position:absolute;
width:xxpx;
height:xxpx;

left:0

right:0

top:0

bottom:0

margin:auto

}

ps:auto

对于width:auto

行内非替换元素:width:包裹的内容
块级元素:width:包裹块的宽度
绝对定位元素:width:包裹内容

Z-index

兄弟关系时:
- Z-index越大越在上面
- Z-index相等,后面的元素在上面
不是兄弟关系
- 各自从元素自己以及祖先元素中,找出最邻近的2个定位元素进行比较
- 而且这2个定位元素必须有设置z-index的具体数值

Float

基本特性

元素一旦浮动后,脱离标准流
- 朝着向左或向右方向移动.直到自己边界紧贴包含块(一般是父元素)或其他浮动元素的边界为止
- 定位元素会层叠在浮动元素上面
浮动元素之间不能重叠
- 一个元素浮动,另一个浮动元素已经在那个位置,后浮动的元素将紧贴前一个浮动元素
- 如果水平方向剩余的空间不够显示浮动元素,浮动元素将向下移动
浮动元素不能与行内级内容层叠,行内级内容将会被浮动元素推出
- 比如行内级元素,inline-block元素,块级元素的文字内容
行内级元素,inline-block元素浮动后,其顶部将与所在行对齐

Ex:

多个元素平行浮动排列,遇到宽度不够的情况.

如一个大盒子宽度1190中平行放5个宽度230,margin-right:10px小盒子,合计1200px的问题

方案一:此时可以在五个小盒子外部套一个盒子a并设置Margin-right:-10px,这样盒子a的宽度会自动变为1200

方案二:通过nth-child(5n)将第五个盒子的margin-right设置为0,

高度塌陷

由于浮动元素脱离了标准流,变成了脱标元素,所以不再向父元素汇报高度
- 父元素计算总高度时,就不会计算浮动子元素的高度导致了高度坍塌的问题
解决父元素高度坍塌问题的过程,一般叫做清浮动
清浮动的目的是
- 让父元素计算总高度时,把浮动子元素的高度算进去

clear

clear属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面

left:要求元素的顶部低于之前生成的所有左浮动元素的底部
right:要求元素的顶部低于之前生成的所有右浮动元素的底部
both:要求元素的顶部低于之前生成的所有浮动元素的底部
none:默认值,无特殊要求

解决方案:

给浮动元素的父元素加一个clear-fix类就可以了

.clear-fix::after{
  content:"";
  clear: both;
  display: block;
  visibility:hidden;
  height:0;
}

Alugg's Blog

Frontend-Day5——Position