码迷,mamicode.com
首页 > Web开发 > 详细

CSS关于定位float、static、relative、absolute、fixed

时间:2017-08-16 23:03:40      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:relative   定位   css   

html的对象是按照文档流的方式,从上而下,从左往右的布置对象/元素。

static: 元素默认的定位方式,遵从基本的html布置规则


relative:相对定位,相对哪个对象呢? 相对的是元素本身的位置

<div class="div5"></div>
<div class="div7"></div>
<style>
    div{
        width:300px;
        height:200px;
    }
    .div5{
        position:relative;
        left:20px;//往下方偏移20px
        top:30px;//往右边偏移20px
    }
</style>

技术分享

图中实体框是div5原本位置,虚线框6是进行相对定位后的位置,但是元素本身在文档流里占据的是实体框的位置,有下一个元素div7时是以实体框为参考的。


absolute:绝对定位,脱离文档流。绝对定位也有个参考目标!如果父级元素是定位方式是 relative/absolute/fixed,那么就以父级元素为参考目标,否则就以body为参考目标


fixed:绝对定位,以浏览器窗口为参考目标。

     补充一点,浏览器窗口 html 一般情况会比body大 9px左右,可以通过设置body的外边距消除。

另外 z-index这个参数只会在定位方式是relative、absolute时生效

本文出自 “12257285” 博客,请务必保留此出处http://12267285.blog.51cto.com/12257285/1956761

CSS关于定位float、static、relative、absolute、fixed

标签:relative   定位   css   

原文地址:http://12267285.blog.51cto.com/12257285/1956761

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!