使用CSS定位属性精确控制对象显示 层叠等级属性

鳄鱼君Ba

发表文章数:518

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » 使用CSS定位属性精确控制对象显示 层叠等级属性

浮动布局虽然灵活,但是却无法对元素的位置进行精确的控制。在CSS中,通过定位属性可以实现网页中元素的精确定位。元素的定位包括定位模式和边偏移。设置定位模式使用:CSS选择器{position:属性值;},对于属性值可以为以下几种:

属性值 描述
absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed

生成固定定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置(文档流位置)进行定位。

因此,”left:20″ 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

设置边偏移的基本语法格式为:CSS选择器{top/bottom/left/right:属性值;},属性的取值为不同单位的数值或百分比。

使用静态定位无法通过边偏移属性来改变元素的位置,即position:static。相对定位将元素相对于它在文档流中的位置进行定位,在文档流中的位置仍然保留着。绝对定位是将元素依据最近的已经定位的父元素进行定位,如果所有的父元素都没有定位过,则依据body元素进行定位,也就是浏览器窗口。固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来进行网页元素的定位。

当多个元素同时设置定位时,定位元素之间有可能会发生重叠,可以使用z-index属性来调整重叠定位元素的堆叠顺序,其取值可为正整数、负整数和0。z-index 属性默认值是0,其基本语法格式为:CSS选择器{z-index:属性值;}

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

<style type="text/css">
    *{margin: 0;padding: 0;}
    p{
        color: #f5efef;
        font-weight: bold;
        font-size: 20px;
        text-align: left;
        line-height: 2;
        margin:30px 40px;
    }
    img{
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        width: 100%;
        z-index: -1;
        opacity: 0.9;
    }
    
    
</style>
<图片标签img src="1.jpg" border="0">
<p>·跟随幼年的记忆探访宝岛_自驾环岛游</p>
<p>·也许当时正好遇到大选时期,大陆政府突然决定自8.1号起暂停发放 台湾 G 签,在7.31号中午看到新闻后,于当日下午赶紧申请了G 签,以至于日后能顺利出发 台湾 之行!出发之前,粗略看了下很多朋友的游记提到 日月潭 和 阿里山 都是名气大,纠结许久,最终还是决定去,毕竟从小对 台湾 最早的认识,正是 日月潭 和 阿里山 ,事实证明,绝无遗憾,非常美。</p>
<p>·西门町门口的对面,可以坐965直达 瑞芳 和 九份 ,90台币,大概坐一个小时。我是坐到 瑞芳 火车站,换乘小火车,沿线游玩的猴硐、十分、菁茼 和平 西。基本上每个站都是差不多一个小时一趟车,每个地方玩一个小时也正好差不多了。</p>
<p>·每个站下车的时候,注意下下班火车的到站时间就可以了,不然错过一趟车,需要等一个钟左右。猴硐</p>
<p>·猴硐并没有猴子,实际上是很多猫的一个小地方,喜欢猫猫的,可以停留十分车站</p>

一般用在图片上添加文字,演示效果:

使用CSS定位属性精确控制对象显示  层叠等级属性

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《使用CSS定位属性精确控制对象显示 层叠等级属性》 发布于2020-04-17

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

9 + 6 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册