定位与锚点
- 文档流:
普通流:上至下,左至右
浮动流:元素添加了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、页面高度足够
上一篇: MySQL视图与索引(基础介绍)
下一篇: Python——工厂模式