css position属性

原创 2016年05月30日 17:02:38

这是css2html属性,所有主流浏览器都支持。


一、Relative

相对于自身原来的位置进行定位,不脱离文档流,偏移出来的空间仍然被占据,其他文档元素不能占有由于偏移而空出来的空间。

 

Expmple

Css样式:

div{
    width:200px;
    height:200px;
}
#div2{
    background-colorred;
}
#div1{
    positionrelative;
    background-color:green;
    top:50px;
    left50px;
}

Html结构:

<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

效果图:


绿色div块,相对于其本身偏移,偏移出来的空白空间不能被红色块所占据。

 

 

 

一、Absolute

相对于他的第一个position属性值不为static的父元素定位。(感觉有点绕口。。),就是他的父元素中第一个position属性值为relative或者absolute的那个父元素定位。定位之后脱离了文档流,原来空间可以被占据。

 

Example

Css代码:

#div1{
    border:1px solid black;
    height400px;
    width:400px;
    margin:auto;
    background-colorred;
    positionrelative;
}
#div2{
    height300px;
    width:300px;
    margin:50px auto;
    background-color:green;
}
#div3{
    positionabsolute;
    left:100px;
    height200px;
    width:200px;
    background-coloryellow;
}

 

 

Html结构:

<body>
        <div id="div1">
            <div id="div2">
                <div id="div3"></div>
            </div>
        </div>
</body>

 

效果图:


可见黄色绝对定位,向左偏移100px,他的父元素有div1div2,而他的最外层父元素div1relative定位属性,所以相对div1即红色块向左偏移了100px

再向绿色块加入一个div块,检验是否会占据黄色偏移空出来的空间。

#div4{
    width:100px;
    height:100px;

    Float:left;
    background-colorblack;
}

 

效果图:

可见黑色框占据了黄色框偏移出来的空间。

 

 

一、Fixed

固定定位,相对于浏览器窗口定位,意思就说就算页面发生滚动,fixed定位的元素位置也不会发生变化。

 

应用的地方其实还是挺多的,回到顶部之类,还是顶部固定的导航也会应用到。



版权声明:本文为博主原创文章,未经博主允许不得转载。

Css 详细解读定位属性 position 以及参数

Css 详细解读定位属性 position 以及参数position 定位属性,是CSS中非常重要的属性。除了文档流布局,就是定位布局了。本来我对这个问题没有放在心上,毕竟写了这么多年的css,对po...
  • FungLeo
  • FungLeo
  • 2015年11月26日 15:04
  • 6329

CSS中的定位——position属性

CSS定位指的是 改变元素在页面中的位置。 CSS定位机制: 普通流:元素按照其在HTML中的位置顺序决定排布的过程(也就是我不对元素进行定位的默认排布) 浮动 绝对布局 CSS定位包含的属性有: ...
  • qq_15096707
  • qq_15096707
  • 2016年01月07日 15:19
  • 1248

CSS: float属性和position属性的区别和应用

在使用div+css进行网页制作时,我们经常需要对某些元素进行一些必要的定位,使其能按照我们预想的效果呈现在页面合适的位置上,而float和position便是实现这一效果的两种方法。 一、浮动(f...
  • fivedoumi
  • fivedoumi
  • 2016年03月10日 21:33
  • 1462

Web前端基础(CSS position的正确用法)

在暑假找实习的时候,折800的技术一面时问我的一道问题:position属性的relative以及absolute的区别是什么?   很惭愧,当时竟然把两者弄混了,现在好好来整理一下...   任何元...
  • u011318165
  • u011318165
  • 2015年08月15日 20:58
  • 1180

关于CSS的position四种取值

关于position的四种取值,自己只是混淆,希望这次总结能加深印象: position
  • yuxuan89814
  • yuxuan89814
  • 2014年08月19日 21:22
  • 1028

CSS Position属性的学习

position属性真是萌新杀手T_T,参照谁定位?谁又脱离了文档流?理解了好长时间才摸清了一些门路。现在就对CSS position属性及HTML中有关定位的知识做一次梳理和总结。 一、从posi...
  • H_O_L_Y
  • H_O_L_Y
  • 2016年07月01日 01:14
  • 465

CSS 定位属性position

position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。 ①absolute :绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最...
  • hlx20080808
  • hlx20080808
  • 2017年04月17日 15:27
  • 121

CSS position 属性:绝对定位与相对定位,以及浮动

可能的值:absolute,fixed,relative,static,static,inherit。 值 描述 absolute 生成绝对定位的元素,相对于 static 定位...
  • xiaozaq
  • xiaozaq
  • 2016年01月17日 17:53
  • 3292

css中position属性(absolute/relative/static/fixed)

转载博客地址:http://www.jb51.net/web/77495.html position:static   无特殊定位,对象遵循正常文档流。top,right,bottom,le...
  • cwzhsi
  • cwzhsi
  • 2015年03月20日 13:08
  • 511

CSS之使用float及position属性实现页面轻松布局

在css的学习过程中,相信有不少盆友会有跟我一样的疑问:就是在使用float属性来进行页面布局时div层会出现消失的情况,接下来我将会在此博文中简单分享一下我对float的理解使用,并使用positi...
  • qiuruolin
  • qiuruolin
  • 2017年04月24日 23:55
  • 270
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css position属性
举报原因:
原因补充:

(最多只允许输入30个字)