文档章节

详解css中position属性

邪气小生
 邪气小生
发布于 2015/11/09 23:48
字数 1594
阅读 198
收藏 5

最近画富瑞的界面,很多元素的定位都是个问题(在我没有很详细的知道position属性之前)

后来上网查了下关于position的一些相关的属性和用法,遂整理了一下

 

position:属性:固定元素的定位类型。即元素脱离文档的布局流,在元素的任意位置显示。

 

关于position的属性值,有四种:

1、static:默认布局(默认值)

2、fixed:固定定位,顾名思义是固定的意思,和absolute定位类似,但是比absolute更”定“!(不随滚动条的滚动而滚动)

3、relative:相对定位,脱离文档的布局流,但是会在文档的原先位置留下空白

4、absolute:绝对定位,脱离文档的布局流,在文档中不会留下位置

 

下面简答的说下这几种定位方式:

一、static

              这个布局为默认的布局,所以可说可不说,大家都比较熟悉了

              这就是意味元素没有被定位,而且在文档出现在它应该出现的位置上

             

二、fixed

              fixed定位的对象是以body为定位的对象,简而言之就是根据整个窗口(page)进行定位,通过(t,r,b,l)来进行定位,

              如果你的scroll设置为false的话,这个定位就很吊了!,很多网站的广告就是这个鬼

              其实感觉网上都说得很麻烦,在我的理解,fixed就是把这个元素钉死在屏幕的这个点上,别的都不管(简单粗暴)

             

三、absolute

              绝对定位,这是将对象抽离出正常的文档流进行定位的一种方式,是将元素从整个文档中飘出来,而元素自身的物理空间也会

              自然而然的消失,不像relative还会有原来的物理位置

              如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位

              如果父级(无限)设定position属性,那么当前的absolute则结合TRBL属性以父级(最近)的左上角为原始点进行定位。

              当设定position: relative 则参照父级(最近)的内容区的左上角为原始点结合TRBL属性进行定位(或者说相对于被定位元素在父级内容区中的上一个元素进行偏移),无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间。因此,移动元素会导致它覆盖其他框。

              一般来讲,居中效果的话用Absolute就容易出错,因为页面一直是随着分辨率的大小自动适应的,

              而Absolute则会以手机屏幕的左上角为原始点,不会应为分辨率的变化而变化位置。有时还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,

              数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。

              在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。

              放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。

             

四、relative(感觉我理解的也不是特别的透彻)

              从应用的角度来说,relative常用于包含有absolute元素的容器元素上。absolute元素默认以body做为容器元素进行绝对定位。

              如果你想在页面一个特定区域进行绝对定位,就可以在absolute元素外包裹一层容器元素应用relative样式。

              形象一点说,相对定位是非常自私的

              其最大特点是:自己通过定位跑开了还占用着原来的位置,不会让给他周围的诸如文本流之类的对象。

              相对定位也比较独立,做什么事它自己说了算,要定位的时候,它是以自己本身所在位置偏移的(相对对象本身偏移)。

              其中relative需要理解最重要的一点就是相对于自身定位:也就是说

              relative是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

             

最后说明下relative和absolute结合使用的一种情况

先说明一句话:

              绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置,那么绝对定位的元素的参考物就是html

在强调一点:relative是相对于自身定位,absolute是相对父级元素定位的

 

举个栗子(网上找的,感觉说的灰常好)

(这里放不了图很不好,不过大家可以脑补嘛)

上图做为一个实例来说明“relative”和“absolute”的关系,首先上图中共有三个div放在body内,

而且他们三个div的关系是“div-1>div-2>div-3”,而且在div-3有这么一个绝对定位:

.div-3 {
                position: absolute;
                left:0;
                top:0;
            }

 下面分几个情况来说明上图的意思:

1、div-1与div-2都没有设置“position:relative”,此时我们的div-3绝对定位后就漂到了上图中“div-3c”的位置上;

 

2、现在我们在div-2元素中加设置一个“position: relative”,此时我们的div-3绝对定位后就漂到了上图中的“div-3a”的位置;

 

3、接下来把相对定位的设置换到div-1元素上,此时div-3绝对定位后就到了div-3b的位置。

 

花这么多心思,我只想说明一点:如果一个元素绝对定位后,其参照物是以离自身最近元素是否设置了相对定位,

如果有设置将以离自己最近元素定位,如果没有将往其祖先元素寻找相对定位元素,一直找到html为止。


© 著作权归作者所有

邪气小生
粉丝 24
博文 52
码字总数 67752
作品 0
朝阳
程序员
私信 提问
CSS(一)详解position

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 https://blog.csdn.net/u014744118/article/details/97300870 最近我想深入学习css知识,所以...

CoolSummmer
07/25
0
0
类似于facebook的固定于页面底部的工具条

今天做项目,要求一个类是于facebook的固定于页面底部的工具条,mon的博客就有一个类是的,主要是IE6的css没有position:fixed属性,里面的菜单我修改了下,针对IE6的用js,其他的用:hover伪类...

monxu
2010/02/20
218
0
IE的hasLayout详解

什么是 haslayout ?     “Layout”是一个 IE/Win的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等,...

sunshinewyf
2015/10/06
63
0
CSS 最核心的几个概念

原文网址链接:http://www.geekplux.com/2014/04/25/severalcoreconceptsofcss.html 本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的...

数通畅联
2015/09/07
17
0
CSS 粘性定位 sticky 详解

前言: position:sticky是css定位新增属性;可以说是static(没有定位) 和 固定定位fixed 的结合;它主要用在对 scroll 事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离...

Coderfei
04/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Less导入选项

Less 提供了CSS @import CSS规则的几个扩展,以提供更多的灵活性来处理外部文件。 语法: @import (keyword) "filename"; 以下是导入指令的相关详情: reference,使用较少的文件但不输出。 ...

凌兮洛
10分钟前
6
0
Docker下实现MySQL主从(读、写分离)同步配置

docker下实现两个(或多个)mysql容器的主、从数据库同步配置,首先要明白docker容器的相互通信关系,默认是使用的bridge模式: 也就是说,通过docker run命令创建docker容器是每个容器都有自己...

源哥L
20分钟前
11
0
一起来学Java8(三)——方法引用

在一起来学Java8(一)——函数式编程中有一个简单的函数式编程的例子: import java.util.function.Consumer;class Person { public static void sayHello(String name) { S...

猿敲月下码
39分钟前
16
0
读书笔记:深入理解ES6(十一)

第十一章 Promise与异步编程   Promise可以实现其他语言中类似Future和Deferred一样的功能,是另一种异步编程的选择,它既可以像事件和回调函数一样指定稍后执行的代码,也可以明确指示代码...

张森ZS
今天
23
0
面试官,Java8 JVM内存结构变了,永久代到元空间

在文章《JVM之内存结构详解》中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化。作为面试官如果你还不知道,那么面试过程中是不是有些露怯?作为面试...

程序新视界
今天
34
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部