10元vpsVultr搬瓦工vps主机商建站程序网站教程国外域名IT资讯

CSS position绝对定位absolute relative

时间:2020-12-26  来源:  作者: 我要纠错

一、position语法与结构
position语法: 

position : static absolute relative 

position参数:
static :  无特殊定位,对象遵循HTML定位规则
absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative :  对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置

position说明:
设置对象的定位方式,可以让布局层容易位置绝对定位,控制盒子对象更加准确。

二、绝对定位使用条件
position:absoluteposition:relative绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。

.divcss5{position:relative} 定义,通常最好再定义CSS宽度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px,距离父级上边距离为10px

.divcss5-a{position:absolute;right:10px;bottom:10px} 这里定义了距离父级靠右距离10px,距离父级靠下边距离为10px

 

对应HTML结构
<div class="divcss5">
    <div class="divcss5-a"></div>
</div>

这样就绝对定位了“divcss5-a”在父级“divcss5”盒子内。

注意的是,left(左)和right(右)在一个对象只能选一种定义,bottom(下)和top(上)也是在一个对象只能选一种定义。

  • 上一篇:如何去掉友情链接的<li>标签的三种方法
  • 下一篇:搜索引擎中intitle的用法例子
  • 无相关信息
    主机资讯
    主机信息
    v.ps
    v.ps
    gcore卢森堡
    gcore卢森堡
    PhpBB
    PhpBB
    DokuWiki
    DokuWiki
    MediaWiki
    MediaWiki
    PmWiki
    PmWiki
    MODX
    MODX
    AbanteCart
    AbanteCart
    推荐信息

    相关文章

    无相关信息

    栏目更新

    Copyright © 2020 ushost.cn Inc. All Rights Reserved. 美国主机中文网 版权所有
    鄂ICP备06013414号-8