h5整理--详解css的相对定位和绝对定位

时间:2022-09-05 22:48:01

浏览器默认状态下position的属性默认值是static也就是没有定位,元素出现在正常的文档流中,这个时候给元素设置的left,right、bottom、top这些偏移属性是没有效果的,不会生效;

eg:比如你设置一个距左边偏移100px的声明:left:100px ;那么这条声明不会起到任何的效果;此外还有z-index属性在这时也是不会生效。也就是说我们平时如果不给某一个元素position属性的声明,那么他默认的就是我上述的这种情况,不过因为有了浮动,通常情况下我们不需要给元素设置position属性!

***但是某些特殊的情况下,我们不得不用position属性,下面详解relative和absolute的值;

(1)relative 相对定位

如果我对某元素设置了相对定位,那么首先这个元素它会和其他的元素一样,出现在文档流中他该出现的位置,然后我们可以设置他的水平或垂直的偏移量,让这个元素相对他在文档中的位置的起始点进行移动。

****注意:在使用相对定位时,就算元素被偏移了,但是他仍然占据着它没有偏移前的空间。如下图:

我们先看看下图:
h5整理--详解css的相对定位和绝对定位
上图中有三个浮动的块,第二个块是设置了相对定位position:relative了的,这时大家看到它的位置并没有其它什么不同,跟其它两个块一样都处在正常的文档流中。
接下来我给那个设置了position:relative的块设置一个偏移:left:50px ; top:30px 这时我们再看看效果:
h5整理--详解css的相对定位和绝对定位

这时我们发现第二块针对它本身位置的起点进行了一个偏移,但是它原来所占据的位置依然还在(虚线线框标示的地方),即使我们把偏移量设置的再大一些,使它完全离开原来的位置,它原来位于文档流中的位置仍然会存在,不会被第三个块浮动过来填补掉。
同时,它的偏移也不会把别的块从文档流中原来的位置挤开,如果有重叠的地方它会重叠在其它文档流元素之上,而不是把它们挤开,就像图中那样,它已经覆盖在了第三个块之上。

我们可以设置它的的z-index属性来调整它的堆叠顺序。

(2)绝对定位:position:absolute

被设置了绝对定位的元素,在文档流中是不占据空间的,如果元素设置了绝对定位,那么他在文档流中的位置会被删除,那这个元素到哪去了呢?它浮了起来其实设置了相对定位定位的relative时也会让该元素浮起来,但是他们的不同点在于,相对定位不会删除他本省在文档流中占据的那块空间,而绝对定位会删除该元素在文档流中的位置,完全从文档流中抽出,我们可以使z-index来设置他们的堆叠顺序。

***绝对定位是如何定位的呢?1、如果它的父元素设置了除static之外的定位,比如:position:relative;position:absulote;position:fixed;,那么他就会相对它的父元素来定位,位置通过left,top,right,bottom属性来规定,如果他的父元素没有设置定位,那么就得看它的元素的父元素是否有设置定位,如果还是没有就继续想更高的祖先元素类推,总是它的定位就是相对与设置了除atatic定位之外的定位(eg:position:absulote;等)的第一个祖元素,如果所有的祖元素都没有以上三种定位中的一种定位,那么他就相对于文档body来定位(并非窗口,相对于窗口定位的是fixed)

绝对定位的元素相对与谁来定位,我们就把这个“谁”叫做参照物,如下图:

h5整理--详解css的相对定位和绝对定位

我们看一下在浏览器里的效果,我们先看看没有使用绝对定位时的样子:

h5整理--详解css的相对定位和绝对定位

 

然后我们给第二个块设置绝对定位:position:absolute 然后再设置一个偏移:left:150px;top:40px; 这时就变成了下图所示:
h5整理--详解css的相对定位和绝对定位

还有一点就是:在设置偏移量的时候,我们可以设置负值。

eg:首先我们来看看下图:
h5整理--详解css的相对定位和绝对定位
在上图中的去购物车结算按钮左上方有一个红色的小块,用来显示购物车中有几件商品,大家在没学会绝对定位之前可能不知道这个红色的小块要怎么实现,但是现在刚刚学了绝对定位,这个问题就不再是问题了。
我还是亲自来做一下吧,我们先把这个背景图片弄出来:
h5整理--详解css的相对定位和绝对定位
然后我们写HTML:

<div class="cart_btn">

<span><i>155</i></span>

<a href="dd.html" target="_blank>去购物车结算</a>

<b></b>

上面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三角形之外,其它的如果都还不会,那你肯定没有好好看前面的文章。再说你实在不懂的话也可以去查一查参考手册
最后我们来看看浏览器里的效果:
h5整理--详解css的相对定位和绝对定位

</div>

h5整理--详解css的相对定位和绝对定位的更多相关文章

  1. 详解CSS的相对定位和绝对定位(讲得很详细)

    详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...

  2. 详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  3. Web—12-详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  4. 详解CSS float属性

    CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...

  5. CSS学习笔记(9)--详解CSS中&colon;nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  6. 详解CSS盒模型(转)

    详解CSS盒模型   阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...

  7. 详解CSS display&colon;inline-block的应用(转)

    详解CSS display:inline-block的应用   阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-b ...

  8. 详解CSS float属性(转)

    详解CSS float属性   阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...

  9. css定位&colon;相对定位、绝对定位、固定定位的区别与特性

    css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...

随机推荐

  1. javascript数组的一些方法实例

    1 concat

  2. android webview开发问题及优化汇总

    我们在native与网页相结合开发的过程中,难免会遇到关于WebView一些共通的问题.就我目前开发过程中遇到的问题以及最后得到的优化方案都将在这里列举出来.有些是老生常谈,有些则是个人摸索得出解决方 ...

  3. Spoj 7001 Visible Lattice Points 莫比乌斯&comma;分块

    题目:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=37193   Visible Lattice Points Time L ...

  4. Android中的一些小知识

    android中开发常用快捷键alt+/ 自动补全ctrl+1 有问题提示生成接收的参数 ctrl+L 在按2 注释// 注释 ctrl+//**/ 多行注释 ctrl+shift+/ android ...

  5. 【Netty】&lpar;9)---Netty编解码器

    Netty编解码器 在了解Netty编解码之前,先了解Java的编解码: 编码(Encode)称为序列化, 它将对象序列化为字节数组,用于网络传输.数据持久化或者其它用途. 解码(Decode)称为反 ...

  6. Flink--基于mysql的sink和source

    基于mysql的source操作 object MysqlSource { def main(args: Array[String]): Unit = { val env = StreamExecut ...

  7. Mysql phpStudy升级Mysql版本,流产了怎么办?

    网上有一些phpStudy升级mysql的方法,如: https://www.cnblogs.com/GreenForestQuan/p/6496431.html 很不错,我的电脑一次成功,但是同事的 ...

  8. 两小时内sql

    select  convert(datetime,convert(char(20),dateadd(hour,-2,getdate())))

  9. 软件架构设计学习总结(4):大数据架构hadoop

    摘要:Admaster数据挖掘总监 随着互联网.移动互联网和物联网的发展,谁也无法否认,我们已经切实地迎来了一个海量数据的时代,数据调查公司IDC预计2011年的数据总量将达到1.8万亿GB,对这些海 ...

  10. 视频直播时的QoS策略

    一.如何判断当前的网络状况 可以以发送一帧视频数据的时间为依据,判断当前网络拥塞情况.    网络中出现丢包和抖动,导致接收端接收数据超时,会激发发送端数据重传,重传机制本身挤占网络带宽,导致send ...