定位与锚点

Posted 2021-03-07 strongerpian

• 文档流：

普通流：上至下，左至右
浮动流：元素添加了float：；
定位流：添加了定位属性

• 定位 position:;

static 默认值
absolute 绝对定位(脱离文档流，不占位；默认参考浏览器零点)
relative 相对定位（占据文档流，占位置；参考自身加载在页面中的位置）
fixed 固定（脱离文档流，不占位；元素固定在页面中，不随页面滚动而滚动；默认参考浏览器零点）
sticky 粘性定位（页面达到一定高度时，脱离文档流；效果是吸附浏览器顶部）（结合了relative和fixed的特征）

坐标位置 水平 left right
垂直 top bottom

• 包含块：

形成嵌套结构，且父级元素有设置定位position：relative；

 

• absolut和relative的区别：

1、是否占据文档流， absolute占据，relative不占据
2、参考物不同，absolute参考html，relative参考自身

• 层级关系 z-index:;

前提条件：有定位的元素才能设置层级关系
auto 默认值0
number 具体数字，可以为负数
并列关系：改变任一元素的层级关系都可以
嵌套关系：只能改变子集的层级关系

• 元素居中方式

第一种：

position:absolute; ==>子元素改变子集位置
top:0p;
right:0px;
bottom:0px;
left:0px;
margin:auto; ==>自适应

第二种：

position:absolute; ==>子集作为被参考物
top:50%;
left:50%;
margin-left:宽度值一半的px;
margin-top:高度值一半的px;

• 锚点链接

1、点击位置 <a href=#name"">点击位置</a>
2、确定跳转位置 <标签 id="name">指定跳转的位置</标签>
3、页面高度足够