首页 > 作文

定位与锚点

更新时间:2023-04-07 08:22:40 阅读: 评论:0

文档流:

普通流:上至下,左至右
浮动流:元素添加了float:;
定位流:添加了定位属性

定位 position:;

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

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

包含块:

形成嵌套结构,且父级元素有设置定位position:relative;

absolut和relative的区别:

1、是否占据文档流, absolut法治的意义e占据,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;
禁锢的爱 mar奔腾电器广告gin-top:高度值一半的px;

锚点链接

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

本文发布于:2023-04-07 08:22:38,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/19cf265ffd899fbe5d6fe26156b75c33.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:定位与锚点.doc

本文 PDF 下载地址:定位与锚点.pdf

标签:位置   层级   关系   文档
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图