-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path8.4 position 浮动.txt
51 lines (47 loc) · 2.78 KB
/
8.4 position 浮动.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
position
static 无定位
1、不设定定位，按照默认文档流进行定位不设定定位
2、一般不需要特别声明
3、遇到继承的情况，不愿看见元素所继承的元素影响本身，
当使用static定位时 top或者left等对其没有起作用
可用position：static取消继承，还原元素定位的默认值
absolute特点：相对于 static 定位以外的第一个父元素进行定位，
即相对于最近的已定位父元素进行定位
1 绝对定位 当前元素完全脱离文档流
不占用原本空间
2 如果有定位父级 相对于定位父级发生偏移，没有定位父级 相对于document发生偏移
3 相对定位一般都是配合绝对定位元素使用
包含元素：通过为absolute定位元素的父元素设定position：relative，
可将这个父元素变为当前absolute定位元素的父元素
4 设置absolute会使得inline元素被“块”化
不论是行内元素还是块级元素，都会生成一个块级框，
比如span使用absolute后就可以设置height和width属性
5 absolute元素会悬浮在页面上方，会遮挡住下方的页面内容，
如果有多个悬浮元素，层级为后来者居上
当两个absolute定位元素叠加一起时，可使用z-index来改变两个元素的显示顺序
6 块属性标签内容撑开宽度。比如p元素设置绝对定位，现实的背景颜色区域是p标签内容决定。
7 设置absolute会使元素已有的float失效
8 使内嵌支持宽高
9 提升层级
当没有设置top、left right bottom的值时文档位置没有变化
eg：通过设置下拉菜单为绝对定位，然后设置其left属性与输入框对齐。
relative 相对定位：相对于当前元素所在的位置进行移动
1 不影响元素本身的特性
2 不脱离文档流（元素移动之后原始位置会被保留）
3 如果没有定位偏移量，对元素本身没有任何影响
4 提升层级
5相对定位元素经常被用来作为绝对定位元素的容器块。实现相对于绝对定位元素进行偏移
fixed 固定定位： 相对于浏览窗口进行定位
1 脱离文档流
2 相对于浏览窗口定位
3 不会随着浏览器的滚动而滚动
float浮动
浮动何时停止：
1、遇到父级元素边框时停止浮动
2、其他浮动元素时停止浮动
清除浮动：位于浮动元素下的非浮动元素会显示到浮动元素的下面，
非浮动元素中的文字会环绕在浮动元素周围。
想要让非浮动元素位于浮动元素之后（单独一行）
需要清除浮动clear：both 清除左右浮动
left 清除左浮动
right 清除右浮动