详解CSS的相对定位和绝对定位(讲得很详细)
详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位
通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效(但是padding,margin是生效的),比如你设置一个距离左边距偏移100px的声明:left:100px 那么这条声明不会起到任何效果。还有z-index属性在这时也不会生效。
也就是说我们平时如果不给某元素一个position属性的声明,那么它默认的就是我上述的这种情况,不过因为有了浮动,所以通常情况下我们还真不需要给元素设置position属性!
但是某些特殊的情况下,我们不得不用到position属性,那我们今天就讲讲position属性的relative和absolute值
首先说relative ,相对定位。
怎么理解呢?如果说我对某元素设置了相对定位,那么首先这个元素他会跟其它的元素一样,出现在文档流中它该出现的位置,然后,我们可以设置它的水平或垂直偏移量,让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意, 在使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间。这里值得注意的一点是:偏移可不是边距,跟边距是不一样的。
我们先看看下图:
上图中有三个浮动的块,第二个块是设置了相对定位position:relative了的,这时大家看到它的位置并没有其它什么不同,跟其它两个块一样都处在正常的文档流中。
接下来我给那个设置了position:relative的块设置一个偏移:left:50px ; top:30px 这时我们再看看效果:
这时我们发现第二个块针对它本身位置的起始点进行了一个偏移,但是它原来所占据的那个位置空间依然还在(虚线框标示的地方),即使我们把偏移量设置得再大一点,使它完全离开原来的位置,它原来位于文档流中的位置仍然会存在,不会被第三个块浮动过来填补掉。
同时,它的偏移也不会把别的块从文档流中原来的位置挤开,如果有重叠的地方它会重叠在其它文档流元素之上,而不是把它们挤开,就像图中那样,它已经覆盖在了第三个块之上。
我们可以设置它的z-index属性来调整它的堆叠顺序。
接下来我们来看看绝对定位:position:absolute
被设置了绝对定位的元素,在文档流中是不占据空间的,如果某元素设置了绝对定位,那么它在文档流中的位置会被删除,那这个元素到哪去了呢?它浮了起来,其实设置了相对定位relative时也会让该 元素浮起来,但它们的不同点在于,相对对定位不会删除它本身在文档流中占据的那块空间,而绝对定位则会删除掉该元素在文档流中的位置,完全从文档流中抽了出来,我们可以通过z-index来设置它们的堆叠顺序。
那么绝对定位是如何定位的呢?
首先,如果它的父元素设置了除static之外的定位,比如position:relative,或者position:absolute以及position:fixed,那么它就会相对于它的父元素来定位,位置通过left , top ,right ,bottom属性来规定,如果它的父元素没有设置定位,那么就得看它父元素的父元素是否有设置定位 ,如果还是没有就继续向更高层的祖先元素类推,总之它的定位就是相对于设置了除static定位之外的定位(比如position:relative)的第一个祖先元素,如果所有的祖先元素都没有以上三种定位中的其中一种定位,那么它就会相对于文档body来定位(并非窗口,相对于窗口定位的是fixed)
绝对定位的元素相对于谁来定位,我们就把这个"谁"叫着参照物,我们结合上面的讲解来看看下图就明白了 :
我们看一下在浏览器里的效果,我们先看看没有使用绝对定位时的样子:
然后我们给第二个块设置绝对定位:position:absolute 然后再设置一个偏移:left:150px;top:40px; 这时就变成了下图所示:
还有一点就是:在设置偏移量的时候,我们可以设置负值。
好了,既然理解了相对定位和绝对定位,那我们应该怎么把它们运用到实际案例中呢?
首先我们来看看下图:
在上图中的去购物车结算按钮左上方有一个红色的小块,用来显示购物车中有几件商品,大家在没学会绝对定位之前可能不知道这个红色的小块要怎么实现,但是现在刚刚学了绝对定位,这个问题就不再是问题了。
我还是亲自来做一下吧,我们先把这个背景图片弄出来:
然后我们写HTML:
<div class="cart_btn">
<span><i>155</i></span>
<a href="dd.html" target="_blank">去购物车结算</a>
<b></b>
</div>
上面HTML代码中的 span元素就是那个用来显示购物车中商品数量的小红块,a元素中是文字描述,b元素是最右边的小三角。
我们来看一下CSS代码:
.cart_btn{width:120px;height:30px;background:url(../images/picA.png) no-repeat -17px 7px#f7f7f7;border:1px solid #eee;padding-left:30px;position:relative;_padding-top:5px;_height:25px;}
.cart_btn span{background:url(../images/picA.png) no-repeat -36px -54px;padding-left:7px;position:absolute; top:-12px;left:20px;}
.cart_btn span i{float:left;height:20px;background:url(../images/picA.png) no-repeat right-25px;padding-right:5px;font-style:normal;color:#fff;font-size:14px;}
.cart_btn a{color:#aaa;text-decoration:none;font-size:14px;padding-left:15px;line-height:30px;}
.cart_btn b{display:inline-block;border-color:transparent transparent transparent #CCCCCC;border-style:dashed dashed dashed solid;border-width:5px;height: 0;overflow: hidden;width: 0;}
上面CSS代码中我们把购物车图标作为.cart_btn的背景,这里我们发现一个问题,就是那一张图片上有三个图标,大家也发现了,我三个用到图标的元素都是用这一张图片做背景,但是显示的却不一样,这里就用到了我们前面讲过的背景定位问题,不会的朋友可认去看看前面的第十一讲:css背景属性background详细讲解-使用背景图片
CSS中的内容是什么意思这里就不讲了,要讲的话就跑题了,这些都是基本的东西,除了那个CSS三角形之外,其它的如果都还不会,那你肯定没有好好看前面的文章。再说你实在不懂的话也可以去查一查参考手册
最后我们来看看浏览器里的效果:
转载自:http://www.3lian.com/edu/2015/01-31/191131.html
详解CSS的相对定位和绝对定位(讲得很详细)的更多相关文章
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- h5整理--详解css的相对定位和绝对定位
浏览器默认状态下position的属性默认值是static也就是没有定位,元素出现在正常的文档流中,这个时候给元素设置的left,right.bottom.top这些偏移属性是没有效果的,不会生效: ...
- Web—12-详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- 详解CSS float属性
CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...
- CSS学习笔记(9)--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- 详解CSS盒模型(转)
详解CSS盒模型 阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...
- 详解CSS display:inline-block的应用(转)
详解CSS display:inline-block的应用 阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-b ...
- 详解CSS float属性(转)
详解CSS float属性 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...
- css定位:相对定位、绝对定位、固定定位的区别与特性
css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...
随机推荐
- centeros7的redis-cli命令不生效解决方法(亲测)
如果你已经安装了redis服务器,并且已经启动,但是redis-cli命令无法生效,分析,命令未加入环境变量.那就给redis命令加入环境变量中: 注意点:redis安装目录会有不同,注意下面的PAT ...
- [转]认识session
今天想用一个session来实现用户登录判断,也算是对之前session的探究,查了下资料session的运行机制如下: session是服务器端的一种会话机制,当客户端的请求服务器创建一个sessi ...
- 将双击“root的主文件”弹出的窗口设置为文件浏览器
1.双击桌面"root的文件夹"图标, 在过去Centos版本之前,每次双击“root主文件夹”都会弹出文件管理窗口: 解决办法: 关闭所有窗口后,重新双击图标: ...
- HSV与RGB的相互转换的公式
H参数表示色彩信息,即所处的光谱颜色的位置.该参数用一角度量来表示,红.绿.蓝分别相隔120度.互补色分别相差180度.纯度S为一比例值,范围从0到1,它表示成所选颜色的纯度和该颜色最大的纯度之间的比 ...
- NYOJ 914 Yougth的最大化【二分/最大化平均值模板/01分数规划】
914-Yougth的最大化 内存限制:64MB 时间限制:1000ms 特判: No 通过数:3 提交数:4 难度:4 题目描述: Yougth现在有n个物品的重量和价值分别是Wi和Vi,你能帮他从 ...
- MapReduce 编程模板
1.MapReduce 编程模型的5个步骤: 1)迭代,将输入数据解析成 key/value 对: 2)将解析的 key/value经过Map处理映射成另一组key/value对: 3)根据key进行 ...
- Hystrix熔断器(六)
一.分布式面临的问题 复杂的分布式体系结构中的应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免地失败雪崩效应多个微服务之间调用的时候,假设服务A调用微服务B和微服务C, 微服务B和微服务C又 ...
- pyinstaller对多进程程序的打包
在使用python的第三方库pyinstaller对多进程程序进行打包时,程序不能正常的运行,但是后台却有多个进程一直在使用资源. 解决方法很简单,在if __name__ == '__main__' ...
- luogu P1359会议
//以一号节点为根节点,求出所有节点到根结点的距离,以及所有点的子节点的个数 //然后计算根据已知信息计算所有节点到当前结点的距离 //然后扫描n个点,O(n)求解 #include<bits/ ...
- The 15th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple - L Doki Doki Literature Club
Doki Doki Literature Club Time Limit: 1 Second Memory Limit: 65536 KB Doki Doki Literature Club ...