网站开发支持多个币种,宁波互联网企业排名,惠州 网站建设,浦口区网站建设技术指导CSS的定位属性有三种#xff0c;分别是绝对定位、相对定位、固定定位。 position: absolute; !-- 绝对定位 --position: relative; !-- 相对定位 --position: fixed; !-- 固定定位 --
下面逐一介绍。
相对定位
相对定位#xff1a;让…CSS的定位属性有三种分别是绝对定位、相对定位、固定定位。 position: absolute; !-- 绝对定位 --position: relative; !-- 相对定位 --position: fixed; !-- 固定定位 --
下面逐一介绍。
相对定位
相对定位让元素相对于自己原来的位置进行位置调整可用于盒子的位置微调。
我们之前学习的背景属性中是通过如下格式 background-position:向右偏移量 向下偏移量;
但这回的定位属性是通过如下格式 position: relative;left: 50px;top: 50px;
相对定位的举例 !doctype htmlhtml langenheadmeta charsetUTF-8meta nameGenerator contentEditPlus®meta nameAuthor contentmeta nameKeywords contentmeta nameDescription contenttitleDocument/titlestyle typetext/cssbody{margin: 0px;}.div1{width: 200px;height: 200px;border: 1px solid red;}.div2{position: relative;/*相对定位相对于自己原来的位置*/left: 50px;/*横坐标正值表示向右偏移负值表示向左偏移*/top: 50px;/*纵坐标正值表示向下偏移负值表示向上偏移*/width: 200px;height: 200px;border: 1px solid red;}/style/headbodydiv classdiv1有生之年/divdiv classdiv2狭路相逢/div/body/html
效果 相对定位不脱标
相对定位不脱标老家留坑别人不会把它的位置挤走。
也就是说相对定位的真实位置还在老家只不过影子出去了可以到处飘。
相对定位的用途
如果想做“压盖”效果把一个div放到另一个div之上我们一般不用相对定位来做。相对定位就两个作用 1微调元素 2做绝对定位的参考子绝父相
相对定位的定位值 left盒子右移 right盒子左移 top盒子下移 bottom盒子上移
PS负数表示相反的方向。
↘ position: relative;left: 40px;top: 10px;
↙ position: relative;right: 100px;top: 100px;
↖ position: relative;right: 100px;bottom: 100px;
↗ position: relative;left: 200px;bottom: 200px; 如果要描述上面这张图的方向我们可以首先可以这样描述 position: relative;left: 200px;top: 100px;因为left: 200px等价于right: -200px所以这张图其实有四种写法。
绝对定位
绝对定位定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示纵坐标用top或者bottom表示。
格式举例如下 position: absolute; /*绝对定位*/left: 10px; /*横坐标*/top/bottom: 20px; /*纵坐标*/
绝对定位脱标
绝对定位的盒子脱离了标准文档流。
所以所有的标准文档流的性质绝对定位之后都不遵守了。
绝对定位之后标签就不区分所谓的行内元素、块级元素了不需要display:block就可以设置宽、高了。
绝对定位的参考点重要
1如果用top描述那么参考点就是页面的左上角而不是浏览器的左上角 2如果用bottom描述那么参考点就是浏览器首屏窗口尺寸好好理解“首屏”二字对应的页面的左下角 为了理解“首屏”二字的含义我们来看一下动态图 问题 答案
用bottom的定位的时候参考的是浏览器首屏大小对应的页面左下角。 以盒子为参考点
一个绝对定位的元素如果父辈元素中也出现了已定位无论是绝对定位、相对定位还是固定定位的元素那么将以父辈这个元素为参考点。
如下子绝父相 以下几点需要注意。
1 要听最近的已经定位的祖先元素的不一定是父亲可能是爷爷 div classbox1 相对定位div classbox2 没有定位p/p 绝对定位将以box1为参考因为box2没有定位box1就是最近的父辈元素/div/div再比如 div classbox1 相对定位div classbox2 相对定位p/p 绝对定位将以box2为参考因为box2是自己最近的父辈元素/div/div
2不一定是相对定位任何定位都可以作为儿子的参考点
子绝父绝、子绝父相、子绝父固都是可以给儿子定位的。但是在工程上如果子绝、父绝没有一个盒子在标准流里面了所以页面就不稳固没有任何实战用途。
工程应用
“子绝父相”有意义这样可以保证父亲没有脱标儿子脱标在父亲的范围里面移动。于是工程上经常这样做 父亲浮动设置相对定位零偏移然后让儿子绝对定位一定的距离。 3绝对定位的儿子无视参考的那个盒子的padding
下图中绿色部分是父亲div的padding蓝色部分p是div的内容区域。此时如果div相对定位p绝对定位那么 p将无视父亲的padding在border内侧为参考点进行定位 工程应用
绝对定位非常适合用来做“压盖”效果。我们来举个lagou.com上的例子。
现在有如下两张图片素材 要求作出如下效果 代码实现如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle typetext/css.box{margin: 100px;width: 308px;height: 307px;border: 1px solid #FF7E00;position: relative; /*子绝父相*/}.box .image img{width: 308px;height: 196px;}.box .dtc{display: block; /*转为块级元素才能设置span的宽高*/width: 52px;height: 28px;background-image: url(http://img.smyhvae.com/20180116_1115.png);background-position: -108px 0px; /*这里用到了精灵图*/position: absolute; /*采用绝对定位的方式将精灵图盖在最上层*/top: -9px;left: 13px;}.box h4{background-color: black;color: white;width:308px;height: 40px;line-height: 40px;position: absolute;top: 156px;}/style
/head
bodydiv classboxspan classdtc/spandiv classimageimg srchttp://img.smyhvae.com/20180116_1116.jpg alt/divh4广东深圳宝安区建安一路海雅缤纷城4楼/h4/div
/body
/html
代码解释如下 为了显示“多套餐”那个小图我们需要用到精灵图。 “多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报image的上方的。
代码的效果如下 让绝对定位中的盒子在父亲里居中
我们知道如果想让一个标准流中的盒子在父亲里居中水平方向看可以将其设置margin: 0 auto属性。
可如果盒子是绝对定位的此时已经脱标了如果还想让其居中位于父亲的正中间可以这样做 div {width: 600px;height: 60px;position: absolute; 绝对定位的盒子left: 50%; 首先让左边线居中top: 0;margin-left: -300px; 然后向左移动宽度600px的一半}
如上方代码所示我们先让这个宽度为600px的盒子左边线居中然后向左移动宽度600px的一半就达到效果了。 我们可以总结成一个公式 left:50%; margin-left:负的宽度的一半 固定定位
固定定位就是相对浏览器窗口进行定位。无论页面如何滚动这个盒子显示的位置不变。
备注IE6不兼容。
用途1网页右下角的“返回到顶部”
比如我们经常看到的网页右下角显示的“返回到顶部”就可以固定定位。 style typetext/css.backtop{position: fixed;bottom: 100px;right: 30px;width: 60px;height: 60px;background-color: gray;text-align: center;line-height:30px;color:white;text-decoration: none; /*去掉超链接的下划线*/}/style
用途2顶部导航条
我们经常能看到固定在网页顶端的导航条可以用固定定位来做。
需要注意的是假设顶部导航条的高度是60px那么为了防止其他的内容被导航条覆盖我们要给body标签设置60px的padding-top。
顶部导航条的实现如下
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml xml:langen
headmeta http-equivContent-Type contenttext/html;charsetUTF-8titleDocument/titlestyle typetext/css*{margin: 0;padding: 0;}
body{/*为什么要写这个*//*不希望我们的页面被nav挡住*/padding-top: 60px;/*IE6不兼容固定定位所以这个padding没有什么用就去掉就行了*/_padding-top:0;}.nav{position: fixed;top: 0;left: 0;width: 100%;height: 60px;background-color: #333;z-index: 99999999;}.inner_c{width: 1000px;height: 60px;margin: 0 auto;}.inner_c ul{list-style: none;}.inner_c ul li{float: left;width: 100px;height: 60px;text-align: center;line-height: 60px;}.inner_c ul li a{display: block;width: 100px;height: 60px;color:white;text-decoration: none;}.inner_c ul li a:hover{background-color: gold;}p{font-size: 30px;}.btn{display: block;width: 120px;height: 30px;background-color: orange;position: relative;top: 2px;left: 1px;}/style
/head
bodydiv classnavdiv classinner_cullia href#网页栏目/a/lilia href#网页栏目/a/lilia href#网页栏目/a/lilia href#网页栏目/a/lilia href#网页栏目/a/lilia href#网页栏目/a/lilia href#网页栏目/a/lilia href#网页栏目/a/lilia href#网页栏目/a/lilia href#网页栏目/a/li/ul/div/div
/body
/html5、z-index属性
z-index属性表示谁压着谁。数值大的压盖住数值小的。
有如下特性
1属性值大的位于上层属性值小的位于下层。
2z-index值没有单位就是一个正整数。默认的z-index值是0。
3如果大家都没有z-index值或者z-index值一样那么在HTML代码里写在后面谁就在上面能压住别人。定位了的元素永远能够压住没有定位的元素。
4只有定位了的元素才能有z-index值。也就是说不管相对定位、绝对定位、固定定位都可以使用z-index值。而浮动的元素不能用。
5从父现象父亲怂了儿子再牛逼也没用。意思是如果父亲1比父亲2大那么即使儿子1比儿子2小儿子1也能在最上层。
针对123条举例如下
这是默认情况下的例子div2在上层div1在下层 现在加一个z-index属性要求效果如下 第五条分析 z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时我们可以用这个z-index属性决定谁处于最上方。也就是层级的应用。
层级
1必须有定位除去static
2用z-index来控制层级数。 写在最后希望大家可以点个关注点个赞这对up真的很重要谢谢 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
