网络营销网站,景安搭建wordpress,seo排名优化教学,基金会网站建设目录 文章目录 一.定位属性概述 二.position 基础数值 三.z-index属性 网页元素透明度 练习 一.定位属性概述 HTML中的定位属性指的是用来控制HTML元素在页面中的位置和布局的属性#xff0c;包括position、top、bottom、left和right等。
position属性指定了元素的定位方式包括position、top、bottom、left和right等。
position属性指定了元素的定位方式常用的取值有static、relative、absolute和fixed。通过设置不同的position值可以实现元素的不同定位方式。top、bottom、left和right属性用于精确地定位元素的位置。当position属性的值为relative时这些属性参照的是元素自身的位置进行调整当position属性的值为absolute或fixed时这些属性参照的是最近的具有定位属性的父元素进行调整。
二.position
基础数值
position属性中的值 static默认值没有定位relative相对定位absolute绝对定位fixed固定定位
演示案例
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle typetext/cssdiv{margin: 10px; padding: 5px; font-size: 15px; line-height: 25px;}#father{border: 1px solid red;padding: 0px;}#first{background-color: orange;border: 1px blue dashed;}#second{background-color: aqua;border: 1px gray dashed;}#third{background-color: aquamarine;border: 1px green solid;}/style/headbodydiv idfatherdiv idfirst第一个盒子/divdiv idsecond第二个盒子/divdiv idthird第三个盒子/div/body
/html static 默认值无定位 relative 相对定位元素相对于其正常位置进行定位可以通过top、right、bottom、left属性调整位置。 案例
#first{background-color: orange;border: 1px blue dashed;position: relative;top: 100px;/**设置偏移量**/
} 相对定位中元素的原有位置会被保留父级边框不会塌陷。 相对定位中top0px left0px的坐标轴为元素本身。 absolute 绝对定位设置绝对定位后的元素将处于悬浮状态。 案例
#first{background-color: orange;border: 1px blue dashed;position: absolute; } 结论 绝对定位的元素会触发浮动悬浮剩余元素将自动补齐浮动元素的位置。 停留在浏览器的左上角
#first{background-color: orange;border: 1px blue dashed;position: absolute; top: 0px;left: 0px;} 停留在上一级元素边框的左上角
#father{border: 1px solid red;padding: 0px;position: relative;}
#first{background-color: orange;border: 1px blue dashed;position: absolute; top: 0px;left: 0px;} 结论 绝对定位的top0px left0px 的坐标轴在上一级设置过元素的左上角若没有则停留在浏览器左上角。 fixed 固定定位 固定定位的元素不会随着浏览器的滚动而改变位置但会脱离标准文档流产生悬浮 案例
#father{border: 1px solid red;padding: 0px;height: 1000px;}
#first{background-color: orange;border: 1px blue dashed;position: absolute; }
#second{background-color: aqua;border: 1px gray dashed;}
#third{background-color: aqua;border: 1px gray dashed; position: fixed;} 停留在浏览器左上角
#third{background-color: aqua;border: 1px gray dashed; position: fixed;top: 0px;left: 0px;} 三.z-index属性 在CSS中z-index属性用于控制元素的堆叠顺序。它指定了一个元素在Z轴上的顺序即元素在层叠元素堆里的垂直位置。 当两个或多个元素重叠时z-index属性决定了哪个元素会显示在顶部。默认情况下元素的堆叠顺序由它们在HTML中的出现顺序决定。后出现的元素会覆盖先出现的元素。 z-index属性的值可以是整数或auto。较高的值表示元素将显示在较低的值上面。 例如如果一个元素A具有z-index值为2而另一个元素B具有z-index值为1那么元素A将显示在元素B上面。 网页元素透明度 案例
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle typetext/css*{margin: 0px;padding: 0px; }ul{list-style: none;position: relative;}#content{width: 330px;overflow: hidden;padding: 5px;font-size: 12px;line-height: 25px;border: 1px red solid; margin: 0 auto;/***设置边框居中*/}#l2,#l3{ /**idl2作为空列表属于块状元素需要设置高度否则会被下级元素覆盖**/position: absolute;width: 330px;height: 25px;top:100px}#l2{color: aliceblue;text-align: center;z-index: 0;}#13{}#l3{background-color: black;opacity:0.5;z-index: 1;}/style/headbodydiv idcontentulliimg srcpicture1.png//lili idl2金秋魅力.相约共享香山红叶/lili idl3/li!--设置一个空列表作为id12的背景列表--li时间:2023年12月20日20:28:10/lili地点:朝阳区西大望江路珠江帝景K区正门前集合/li/ul/div/body
/html 练习
