Vultr搬瓦工vps网站教程国外域名

CSS position绝对定位absolute relative

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


一、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>标签的三种方法
  • 下一篇:返回列表
  • 无相关信息
    主机资讯

    主机信息
    帝国cms 调用栏目(去除某个栏目不调用)的方法
    帝国cms 调用栏目(去除某个栏目不调用)的方法
    如何将域名从Namesilo转出?
    如何将域名从Namesilo转出?
    阿里云共享型服务器与独享型服务器的区别及如何选择?
    阿里云共享型服务器与独享型服务器的区别及
    帝国cms 后台,点击统计没有显示,点击为0如何解决
    帝国cms 后台,点击统计没有显示,点击为0如何
    帝国CMS网站怎么接入第三方登录功能:QQ登录
    帝国CMS网站怎么接入第三方登录功能:QQ登录
    帝国怎么关闭后台操作日志?
    帝国怎么关闭后台操作日志?
    WordPress常用插件
    WordPress常用插件
    OneNote 与 OneNote 2016 有什么区别?
    OneNote 与 OneNote 2016 有什么区别?
    推荐信息

    相关文章

    无相关信息

    栏目更新

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