首页 » CSS » HTML+CSS之关于position的一些使用记录

HTML+CSS之关于position的一些使用记录

原文 http://blog.csdn.net/gsw333/article/details/79041945

2018-01-13 02:00:14阅读(539)

前端布局的时候用到的一个css属性-position,这个属性经常用到,对于前端写布局起到非常重要的作用,在此记录下关于使用position的一些个人看法。

position是用于设置元素的定位方式,默认是static,按文档流的定位方式排下来:

<body>
<div>
    <h1>段落1</h1>
</div>
</body>
style样式:

 <style>
        body {
            border: 5px solid red;
        }
        div {
            border: 5px solid black;
        }
        h1 {
            border: 5px solid green;
        }
    </style>

运行结果如下,正常情况下,为了分别各个元素,加了颜色框。

HTML+CSS之关于position的一些使用记录

现在我们给h1元素增加position:absolute,但是不设置top,left,right,bottom,如下:

<style>
        body {
            border: 5px solid red;
        }
        div {
            border: 5px solid black;
        }
        h1 {
            border: 5px solid green;
            position: absolute;
        }
    </style>
现在运行下,效果如下:

HTML+CSS之关于position的一些使用记录
我们可以看到效果变了,之前绿色框是被黑色和红色包围着的,现在自己脱离了,并且红色黑色框高度没了,绿色框宽度没了。原因:

h1设置absolute之后,会脱离文档流,脱离文档流的元素会塌陷,即宽度高度会变成自适应(如果没设置具体宽度高度),所以绿色框宽度变短了,而红色黑色框由于h1的脱离,它没有内容支撑,所以里面没有元素了,所以高度变了,但是它自己没有设置position所以没有脱离文档流,所以宽度还是填满的。如果你给红色框设置了absolute,你回发现红色黑色框宽度变了,变成自适应的大小了,而不是填满。

此时,我们再给绿色框即h1设置left,top等属性:

<style>
        body {
            border: 5px solid red;
        }
        div {
            border: 5px solid black;
        }
        h1 {
            border: 5px solid green;
            position: absolute;
            left: 5px;
        }
    </style>
效果:

HTML+CSS之关于position的一些使用记录

此时发现位置变了,因为不设置left,top之类的,它的位置依然是以父元素为基准的正常位置,即第一张图的位置,如果设置left或者top之类的属性后就会以最近的设置了定位属性的父元素为基准,由于红色框和黑色框都没设置position,所以就是以窗口左上角为基准来定位的。注意:left,top之类的属性只有在position设置了absolute或者relative才有效,它们是在正常位置进行left、top等操作的。你可以取消h1的position试试,此时left之类的属性都没有效果了。

再来,我们将h1的position设置为relative,然后将left设置为15px,之前是5px,看不出来效果,不够明显。

<style>
        body {
            border: 5px solid red;
        }
        div {
            border: 5px solid black;
        }
        h1 {
            border: 5px solid green;
            position: relative;
            left: 15px;
        }
    </style>
效果:

HTML+CSS之关于position的一些使用记录
你会发现,它跟第一张图是一样的,除了它向右移动了15px,这就是relative的作用,relative就是让你可以相对于父元素,用left、top等属性让它相对于原位置进行移动,如果不是relative或者absolute,那么left、top之类就无效。可以和absolute对比下,发现(给h1设置absolute和relative)区别在于:

1.relative的时候,父元素黑色框和再上层的红色框依然是填满的;absolute的话,父元素会自适应高度变矮。由于黑色框和红色框没设置absolute,所以没有脱离文档流,因此宽度还是填满的。

2.relative时,绿色框的left是相对于黑色框来作为参照物进行偏移的;absolute的话,是以窗口作为参照物进行偏移的(如果上层的元素设置了定位属性,那么就会以最近的设置过定位属性的父元素作为参考)。

最后,由于本人是安卓开发者,所以对前端的知识没有各位前端的大神熟悉,有不当之处还请见谅并指出。




最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹