相对定位绝对定位固定定位元素的层级

相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景

相对定位

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.box1 {width: 100px;height: 100px;background-color: antiquewhite;}.box2 {width: 100px;height: 100px;background-color: brown;/* 定位：定位指的就是将指定的元素摆放到页面的任意位置通过定位可以任意的摆放元素通过 position 属性来设置元素的定位可选值：static 默认值，元素没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定定位（也是绝对定位的一种）*//* 当元素的position 属性设置为 relative时，则开启了元素的相对定位1. 当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生变化2. 相对定位是相对于元素在文档流中原来的位置进行定位3. 相对定位的元素不会脱离文档流4. 相对定位会使元素提升一个层级5. 相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素*/position: relative;/* 当开启了元素的定位（position属性值是一个非static的值）时，可以通过 left right top bottom 四个属性来设置元素的偏移量left 元素相对于定位位置的左侧偏移量right 元素相对于定位位置的右侧偏移量top 元素相对于定位位置的上边的偏移量bottom 元素相对于其他定位位置下边的偏移量通常偏移量只需要使用两个就可以对一个元素定位，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位*/left: 100px;top: 100px;}.box3 {width: 100px;height: 100px;background-color: aquamarine;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body></html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.box1{width: 200px;height: 200px;background-color: red;}.box2{width: 200px;height: 200px;background-color: blue;/* 当position属性值设置为absolute时，则开启了元素的绝对定位绝对定位：1. 开启了绝对定位，会使元素脱离文档流2. 开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化3. 绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的（一般情况下是子元素开启的绝对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位4. 绝对定位会使元素提升一个层级5. 绝对定位会改变元素的性质内联元素变成块元素块元素的宽度和高度默认都被内容撑开*/position: absolute;}.box3{width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body>
</html>

固定定位&元素的层级&opacity元素的透明背景

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.box1 {width: 200px;height: 200px;background-color: red;}.box2 {width: 200px;height: 200px;background-color: blue;/* 当元素的position属性设置fixed时，则表示开启了元素的固定定位固定定位也是绝对定位，它的特点与绝对定位大部分一致不同点：固定定位永远都会相对于浏览器窗口进行定位固定定位会固定在浏览器窗口某个位置，不会随着滚动条滚动*/position: fixed;}.box3 {width: 200px;height: 200px;background-color: green;position: absolute;/* 设置偏移量 */top: 100px;left: 100px;/* 1.如果定位元素的层级是一样的,则下边的元素会盖住上边的元素2.通过z-index属性可以用来设置元素的层级3.可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级层级越高，越优先显示4.对于没有开启定位的元素不能使用z-index5.父元素的层级再高，也不会盖住子元素*/z-index: 1;/* 设置元素的透明背景opacity 可以用来设置元素的背景透明需要设置0-1的值0 表示完全透明1 表示完全不透明0.5 表示半透明*/opacity: 0.5;/* opacity 属性在IE8及以下的浏览器中不支持IE8及以下的浏览器需要如下属性代替alpha（opacity=透明度）透明度，需要一个0-100之间的值0 表示完全透明100 表示完全不透明50 表示半透明*/filter: alpha(opacity=50);}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body></html>

相对定位绝对定位固定定位元素的层级相关推荐

相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
文章目录定位静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序表单设置光标样式透明度 opacity属性定义元素 ...
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
绝对定位,相对定位,固定定位和粘性定位的特性及区别,我整理一下放在文章最下面了,不用死记硬背,理解一下就ok,需要的话可以看看. 当导航栏头部没有别的模块时,想要滑动过程中导航栏一直在顶部,有两种写法 ...
CSS定位—静态定位、相对定位、固定定位、绝对定位、粘性定位
CSS定位定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子. 定位的组成定位是将盒子定位在某一位置.按照定位的方式移动盒子. 定位=定位模式+边偏移. ...
绝对定位、相对定位、固定定位特点
一.定位 1.定位的定义某个元素可以自由地在盒子上面移动,并且可以压着其他元素当滚动窗口时,某个元素可以固定在页面上可以让盒子自由的在某个盒子上进行移动并且可以压住其他盒子,或者可以在屏幕上固定 ...
定位的坐标原点HTML,css固定定位_CSS绝对定位固定定位详解
摘要腾兴网为您分享:CSS绝对定位固定定位详解,智学网,鱼乐贝贝,优酷,瑞易生活等软件知识,以及安卓微信多开,特效视频,微贷网app,勿忘我3dm,有为学堂,火力牛,手机知网,移动小秘书,快学堂,p ...
定位（绝对定位相对定位默认固定定位）
(1)绝对定位(position:absolute) ①相对于已经定位的父级元素去定位 ②若父级元素未定位,则相对于HTML根文档定位 ③完全脱离文档流,不占有位置 ④通过left top botto ...
层模型--绝对定位、相对定位、固定定位
绝对定位: 如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性 ...
css盒子绝对定位，相对定位，固定定位
相对定位使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它. 使用rela ...

相对定位绝对定位固定定位元素的层级

相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景

相对定位

绝对定位

固定定位&元素的层级&opacity元素的透明背景

相对定位绝对定位固定定位元素的层级相关推荐

最新文章

热门文章