200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > (18)css常用样式—定位属性

(18)css常用样式—定位属性

时间:2021-11-21 17:03:45

相关推荐

(18)css常用样式—定位属性

一、定位属性position

前面我们已经了解过布局相关的盒模型、浮动等属性,而定位是另一种布局的重要属性,常用于制作压盖或者位置相关的效果。

属性名:position

属性值:relative 相对定位 absolute 绝对定位 fixed 固定定位

作用:设置定位的元素,它需要根据某个参考元素发生位置的偏移。

二、偏移量属性

定位的元素要想发生位置的移动,必须搭配偏移量属性进行设置。

水平方向:left、right。

垂直方向:top、bottom。

属性值:常用 px 为单位的数值,或者百分比。

三、相对定位

属性值:relative,相对的意思。 参考元素:标签加载的原始位置。 必须搭配偏移量属性才能发生位置移动。

1.相对定位的性质

相对定位的元素不脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置。 元素显示效果上,记忆口诀:原位留坑,形影分离。

2.相对定位的注意事项

注意①:偏移量属性的值是区分正负的。 正数:表示偏移方向与属性名方向相反。负数:表示偏移方向与属性名方向相同。例如:left:-100px,它是向左进行偏移,所以和单词left左的意思一样。

注意②:同一个方向,不能设置两个偏移量属性,如果水平方向同时设置了 left 和 right 属性,只会加载 left 属性。垂直方向只加载 top 属性。 建议:书写时从水平方向和垂直方向各挑一个属性进行组合。

注意③:由于相对定位的参考元素是自身,left 的正值等价于 right 的负值,top 的正值等价于 bottom 的负值。 为了方便记忆,可以选择只使用 left、top 组合。

四、定位的实际应用案例

1. 由于相对定位元素比较稳定,不会随意让出位置,可以将相对定位的元素作为后 期绝对定位的参考元素,就是所说的子绝父相情况。

2. 相对定位比较稳定,可以在占有原始位置的情况下,对加载效果区域进行位置调整,进行微调设置。或者对文字进行微调。

示例:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位的实际应用案例</title><style>body,ul,li,a{margin: 0;padding: 0;}.nav {list-style: none;width: 900px;height: 50px;margin: 50px auto;font: 20px/50px "微软雅黑";background-color: #f00;}.nav li {float: left;width: 150px;height: 50px;}.nav li a {display: block;width: 150px;height: 50px;background-color: skyblue;text-decoration: none;text-align: center;}.nav li a:hover {position: relative;left: 0;top: -3px;border-top: 3px solid #f00;background-color: #0f0;}</style></head><body><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li></ul></body></html>

五、绝对定位

属性值:absolute,绝对的意思。 参考元素:参考的是距离最近的有定位的祖先元素,如果祖先都没有定位,参考 <body>。 必须搭配偏移量属性才会发生位置移动。

示例1:当我们没有设置偏移属性,它就会自己让出自己的位置,脱离文档流

示例2:当我们设置了偏移属性,没有设置相对定位,它是相对于Body进行偏移的。

​​​​​

示例3:当我们设置了偏移属性,也设置相对定位了,它是相对于设置了相对定位的父元素进行偏移的。

绝对定位的性质

性质:绝对定位的元素脱离标准流,会让出标准流位置,可以设置宽高,也可以随时定义位置,绝对定位的元素不设置宽高只能被内容撑开。 注意1:绝对定位的参考元素是不固定的,不同的参考元素以及不同的偏移量组合, 会导致绝对定位元素的参考点不同,具体位移效果不同。 注意2:在绝对定位中,由于参考点不同,left 正值不再等价于 right 的负值。

<body> 为参考元素的参考点

以 <body> 为参考元素时,参考点的确定与偏移量方向有关。 第一,如果有 top 参与的定位,参考点就是 <body> 页面的左上顶点和右上顶点。自 身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。 第二,如果有 bottom 参与的绝对定位,参考点是 <body> 页面首屏的左下顶点或 右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。 实际应用中,如果以 <body> 为参考元素,不同分辨率的浏览器中,绝对定位的元 素位置是不同的,所以较少使用 <body> 作为参考元素。

祖先级为参考元素

如果祖先级中有定位的元素,就不会去参考 <body> 。 参考元素:参考的是祖先元素中有任意定位的,在 HTML 结构中距离目标最近的祖先。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>祖先级为参考元素</title><style>body,div,p {margin: 0;padding: 0;}.box1 {position: relative;width: 600px;height: 600px;padding: 10px;border: 10px solid #f00;}.box2 {position: absolute;width: 400px;height: 400px;padding: 10px;border: 10px solid #0f0;}.box3 {position: fixed;width: 200px;height: 200px;padding: 10px;border: 10px solid #00f;}p {position: absolute;top: 0px;left: 0px;width: 50px;height: 50px;background-color: skyblue;}</style></head><body><div class="box1"><div class="box2"><div class="box3"><p></p></div></div></div></body></html>

根据绝对定位的参考元素的定位类型不同,有三种定位组合方式:子绝父相、子绝父绝、子绝父固,由于相对定位的祖先级位置更稳定,大多使用子绝父相的情况,也可以说成是父相子绝。

祖先元素参考点

如果绝对定位的参考元素是某个祖先级,参考点是盒子 border 以内的四个顶点,组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离,会忽视参考元素的 padding 区域。 left、top:参考点是祖先的 border 以内的左上顶点,对比点是盒子自身的左上角。 right、top:参考点是祖先的 border 以内的右上顶点,对比点是盒子自身的右上角。 left、bottom:参考点是祖先的 border 以内的左下顶点,对比点是盒子自身的左下 角。right、bottom:参考点是祖先的 border 以内的右下顶点,对比点是盒子自身的右下角。

六、固定定位

属性值:fixed,固定的意思。 参考元素:浏览器窗口。 参考点:浏览器窗口的四个顶点。跟偏移量组合方向有关。 由于浏览器窗口的四个顶点位置不会发生变化,会导致固定定位的元素会始终显示在定位位置。

适用场景:常用于制作网页回到顶部按钮

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css定位—固定定位</title><style>div {width: 300px;height: 300px;background-color: skyblue;margin-top: 20px;}a {position: fixed;right: 100px;bottom: 100px;width: 100px;height: 50px;background-color: #0f0;font: 20px/50px "微软雅黑";text-align: center;text-decoration: none;}</style></head><body><a href="#">回到顶部</a><div></div><div></div><div></div><div></div><div></div></body></html>

固定定位的性质

固定定位的元素脱离标准流,让出标准流位置,可以设置宽高,根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。

七、定位应用

定位 position根据属性值不同有三种类型的定位效果,其中绝对定位和固定定位的元素会脱离标准流。 三种定位在页面中有各自的使用场景

1.压盖效果

所有的定位类型都可以实现压盖效果。 由于绝对定位的元素脱标,不占标准流位置,压盖效果更彻底,实际工作中,常见的是绝对定位制作的压盖。

2.居中效果

定位的元素,如果想在参考元素中居中显示,有自己的居中方法:

第一步:在居中的方向使用一个偏移量属性,例如 left,设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。 百分比形式的属性值,百分百参考的是参考元素的 border 以内的宽度、高度。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css-压盖效果</title><style>.box {position: relative;width: 300px;height: 300px;border: 10px solid #000;}p {position: absolute;left: 50%;width: 100px;height: 100px;background-color: #f00;}</style></head><body><div class="box"><img src="images/hat.png" alt=""><p></p></div></body></html>

第二步:给绝对定位的子盒子设置一个同方向的 margin,例如 margin-left,属性值 为负的自身宽度的一半。

注意:不论子盒子的宽度是否比参考元素更宽,都能使用以上方法进行居中设置。

扩展应用

①解决标准流中,宽的子盒子在窄的父盒子中的居中,可以设置大的子盒子相对定位,利用相对定位居中的方法进行居中。

②浮动的元素居中,在不改变原始浮动状态情况下,可以利用相对定位居中方法。

八、压盖顺序

实际使用定位时,可能出现多个定位的元素加载到同一个位置的情况,这时候压盖的顺序是可以控制的。

1.默认压盖顺序

定位的元素不区分定位类型,都会去压盖标准流或浮动的元素。 如果都是定位的元素,在 HTML 中后写的定位压盖先写的定位。 因此,书写代码时,需要注意压盖效果,必须合理设置 HTML 元素的书写顺序。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css层叠z-index</title><style>.box1 {width: 200px;height: 200px;background-color: skyblue;}.box2 {position: relative;top: -200px;width: 150px;height: 150px;background-color: #f00;}.box3 {position: absolute;left: 0;top: 0;width: 100px;height: 100px;background-color: #0f0;}.box4 {position: fixed;left: 0;top: 0;width: 50px;height: 50px;background-color: #00f;}</style></head><body><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div><div class="box4">box4</div></body></html>

2.自定义压盖顺序z-index 属性

如果想更改定位的元素的压盖顺序,可以设置一个 z-index 属性。 属性值:数字。

3.自定义压盖顺序注意事项

①属性值大的会压盖属性值小的,设置z-index属性的会压盖没有设置的。例如给其中一个盒子设置z-index的属性值为1,那么其他的盒子没有设置z-index属性,他会将加了z-index属性的盒子显示再最外层。

②如果属性值相同,比较HTML书写顺序,后写的压盖先写的。这里参考的是HTML标签元素的熟书写顺序,而不是css的书写顺序。

③z-index属性只能设置给定位的元素才会生效,如果给没有定位的元素设置,不会生效。

④父子盒模型中,如果父子盒子都进行了定位,与其他的父子级有压盖的部分: 父级盒子:如果不设置z-index,后写的压盖先写的;如果设置了z-index,值大的压盖值小的。子级盒子:如果父级没有设置z-index属性,子级z-index大的会压盖小的;如果父级设置了 z-index值,无论子级值是多少,都是父级的值大的子级压盖父级值小的子级,俗称“从父效应”。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css层叠z-index</title><style>.box1 {width: 200px;height: 200px;background-color: skyblue;}.box2 {position: relative;top: -200px;width: 150px;height: 150px;background-color: #f00;}.box3 {position: absolute;left: 0;top: 0;width: 100px;height: 100px;z-index: 2;background-color: #0f0;}.box33 {position: absolute;left: 0;top: 0;width: 100px;height: 100px;background-color: pink;}.box4 {position: fixed;left: 0;top: 0;width: 200px;height: 200px;z-index: 1;background-color: #00f;}.box5 {position: fixed;left: 0;top: 0;width: 50px;height: 50px;background-color: #ccc;}</style></head><body><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3<div class="box33">box33</div></div><div class="box4">box4<div class="box5">box5</div></div></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。