亲,请登录 免费注册

CSS之--定位

扫描二维码阅读手机版

css定位

1.文档流的概念

网页在浏览器中,如果没有其他影响自己排列的属性存在(如定位和浮动),总是按照自己固有的规则进行排列的,你可以把这种规则想象为流水一样,一次排开,源源不断,直到整个网页内容呈现完全。当某一个元素,如果使用了影响自己正常规则排列的属性之后,他就从其正常的文档流中脱离出来,单独排列,可能覆盖在其他元素上面,可能在其他元素左边,可能在浏览器底部或者任何位置,这种现象,即所谓的脱离文档流。脱离了文档流之后,就会产生层级(z-index)的概念,使其有效的进行排列。

2.什么叫定位(position)

说到定位,就不得不说,网页的布局和结构。在网页中,元素大概大致可以粗略的划分为:块元素(block)和行内元素(inline)[inline-block咱不讨论],在没有CSS的作用下,它们各自按照自己的规则排列,块元素从上到下,另起一行,行内元素从左到右,依次排列。

定位元素,允许定义的元素相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

常用的定位方式inherit(继承)、static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)。

3.定位的方式;

1).static(静态定位)

这是文档中的默认值,相当于没有定位,元素依然按照自己的规则排列(块级元素从上到下,行内元素从左到右排列),元素出现在正常的流中(top,bottom,left,right方位值和z-index属性);

2).relative(相对定位)

相对定位,是相对其元素自身正常位置进行定位,元素的位置可以通过top,left,right,bottom等方位值来进行改变,但是这种定位方式并不脱离文档流,z-index属性对其无效;

例如:

div{
    position:relative;
    top:10px;
    left:20px;
}

上面例子即是说:让div这个元素的位置,是在距离其他元素上面10像素,左边20像素的位置;

3).absolute(绝对定位);

绝对定位,相对于除了静态定位之外的第一个父元素进行定位,这种定位会脱离文档流,同样的通过top,left,right,bottom方位值可以改变其位置,z-index属性对其有效;

例如:

html结构;

<div class="box1">
    <div class="box2"></div>
</div>

css结构:

.box1{
    width:100px;
    height:100px;
    position:relative;
}
.box2{
    position:absolute;
    top:20px;
    left:30px;
}

上面的例子即为:box2这个元素,在距离box1这个元素的上边为20像素,左边30像素的位置。

永远记住,绝对定位,是相对于除了静态定位之外的第一个父元素进行定位,也就是说如果这个元素的直接父级,没有除了static以外的任何定位,那这个元素就会接着向上面查找,一直查找到有父级元素有除了static以外的定位之后,来相对这个父元素进行定位,如果整个文档查完都没有发现这种父元素,就相对于body进行定位,并且这种定位会脱离文档流。所以对于这种定位,一定要使用熟练,否则切记慎用,切勿滥用,要不然整个网页的布局,会相当麻烦。

4).fixed(固定定位)

类似于绝对定位,但是这种定位,只针对浏览器视窗本身定位。同样的可以通过top,left,right,bottom等方位值改变其位置。和绝对定位一样,其脱离文档流,可以使用z-index属性改变其层级。

例如:

html结构;

<div class="box1">
    <div class="box2"></div>
</div>

css结构:

.box1{
        width:100px;
        height:100px;
        position:relative;
}
.box2{
        position:fixed;
        top:20px;
        left:30px;
}

使用固定定位之后,你会发现,即使box1元素在浏览器中间。box2元素也会跑到上边去。原因是因为,这种定位是相对浏览器视窗进行定位的。上面的css即表示:box2这个元素,出现在距离浏览器顶部20像素,左边30像素的位置。

5).inherit(继承定位)

几乎不怎么用。

4.z-index的概念。

了解文档流和定位之后,可以看出,元素脱离文档流之后,会产生重叠的问题。假如两个元素产生重叠,是如何区分或者识别其层级的呢?好在CSS有一个z-index属性,可以帮助我们轻松搞定这个问题。z-index属性值越大,相对而言其元素层级越高。

例如:

html结构;

<div class="box1"></div>
<div class="box2"></div>

css结构:

.box1{
    position:absolute;
    top:20px;
    left:20px;
}
.box2{
    position:absolute;
    top:20px;
    left:20px;
}

对于box1和box2两个元素,其都采用了绝对定位属性。并且相互重叠在一起,如果我们没有给两个元素加z-index属性,那么默认的情况是box2元素覆盖在box1元素上面。

但是如果我们采用了z-index属性,情况就完全发生了转变。对于上面的例子,我们给box1元素加上z-index属性如下:

.box1{
    position:absolute;
    top:20px;
    left:20px;
    z-index:2;
}

那么此时box1元素即会覆盖在box2元素上面。应为box1元素的层级,此时比box2高。

当一个元素的层级确定之后,其所有子元素,都会遵循其父元素的层级来排列。

例如:

html结构;

<div class="box1">
    <div class="box3"></div>
</div>
<div class="box2">
    <div class="box4"></div>
</div>

css结构:

.box1{
    position:absolute;
    top:20px;
    left:20px;
    z-index:2;
 }
.box2{
    position:absolute;
    top:20px;
    left:20px;
    z-index:1;
}
.box3{
    position:absolute;
    z-index:20;
}
.box4{
    position:absolute;
    z-index:999;
}

在这个例子中,即使box4元素的z-index属性设置的再大,也依然会被box1元素覆盖在后面。因为box1元素的z-index属性比box2元素的z-index大,所以box1会排在box2的上面,而其元素内部的子元素,也依然遵循父元素的z-index属性。

本文章由http://www.19652.com 19652站长网发布,转载请注明来源

关注IT新闻、SEO优化、站长技术、营销、建站,扫描19652站长网二维码,定期送礼品。

微信扫描

安卓扫描

热门精选

  • js原生查找元素的4种方法

    js原生查找元素的4种方法

  • JS之--初识对象和创建对象

    JS之--初识对象和创建对象

  • CSS之--定位

    CSS之--定位

  • js判断分支条件语句

    js判断分支条件语句