欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

定位与锚点

程序员文章站 2022-06-19 10:23:37
文档流: 普通流:上至下,左至右 浮动流:元素添加了float:; 定位流:添加了定位属性 定位 position:; static 默认值 absolute 绝对定位(脱离文档流,不占位;默认参考浏览器零点) relative 相对定位(占据文档流,占位置;参考自身加载在页面中的位置) fixed ......
  • 文档流:

普通流:上至下,左至右
浮动流:元素添加了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、页面高度足够