1、相对定位

2、绝对定位

3、固定定位

4、粘滞定位

5、绝对定位元素布局

6、层级以及透明效果

1、相对定位

定位：

更加高级的布局手段

- 定位指的就是将指定的元素摆放到页面的任意位置

通过定位可以任意的摆放元素

- 通过position属性来设置元素的定位

-可选值：

static： ['stætik] 默认值，元素没有开启定位

relative： ['relətiv] 开启元素的相对定位

absolute： ['æbsəlju:t] 开启元素的绝对定位

fixed：开启元素的固定定位（也是绝对定位的一种）

sticky： ['stiki] 开启元素的粘滞定位

相对定位：

当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型

1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）

3.相对定位的元素不会脱离文档流

4.相对定位会使元素提升一个层级

5.相对定位不会改变元素的性质，块还是块，内联还是内联

偏移量

当开启了元素的定位（position属性值是一个非static的值）时，

可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动

left：元素向右偏移量，

right：元素向左偏移量

top：元素向下偏移量

bottom：元素向上偏移量

可设正值，也可设负值

通常偏移量只需要使用两个就可以对一个元素进行定位，

一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box {width: 600px;height: 600px;border: 5px solid rgb(56, 56, 56);}.box1 {width: 200px;height: 200px;background-color: red;/* float: left; */}.box2 {width: 200px;height: 200px;background-color: yellow;position: relative;left: 100px;/* right: 100px; *//* bottom: 200px; */top:100px}.box3 {width: 200px;height: 200px;background-color: green;}.s1 {/* width: 200px;height: 200px; */background-color: yellow;position: relative;bottom: 200px;}</style></head><body><div class="box"><div class="box1"></div><div class="box2"></div><div class="box3"></div><span class="s1">我是一个span</span></div></body>
</html>

2、绝对定位

当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位：

1.开启绝对定位，会使元素脱离文档流

2.绝对定位会改变元素的性质，不在区分块还是行内，更类似行内块元素

3.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

4.绝对定位会使元素提升一个层级

5.绝对定位是相对于离他最近的包含块定位的

（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）

包含块：containing block

-正常情况下：

离当前元素最近的祖先块元素

-定位情况下：

离他最近的开启了定位的祖先元素

如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

html （根元素，初始包含块）

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">.outer {width: 600px;height: 600px;border: 5px solid black;}.box1 {width: 100px;height: 100px;background-color: orange;/* 开启元素的绝对定位 */position: absolute;top: 0px;left: 0px;}.box2 {width: 100px;height: 100px;background-color: red;}.box3{width: 400px;height: 400px;background-color: pink;position: relative;overflow: hidden;}.box4{width: 300px;height: 400px;background-color: blue;position: absolute;margin-top: 100px;margin-left: 50px;}</style></head><body><div class="outer"><div class="box3"><div class="box4"><div class="box1"></div><!-- <div class="box2"></div> --></div></div></div></body>
</html>

3、固定定位

当元素的position属性设置fixed时，则开启了元素的固定定位

（1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；

（2）以浏览器为参照物，和父元素没有任何关系；

　　（3）固定定位不占有原来的位置，即脱离标准流 ,改变元素的性质

(4)应用场景

- 固定导航

- 固定侧边栏

- 广告

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">.outer {width: 600px;height: 600px;border: 5px solid black;}.box1 {width: 200px;height: 200px;background-color: orange;position: fixed;left: 0px;top: 0px;}.box2{width: 400px;height: 400px;background-color: burlywood;position: relative;}</style></head><body style="height: 5000px"><div class="outer"><div class="box2"><div class="box1"></div><span>否苦于毒至帝龄亲国。</span></div></div></body>
</html>

4、粘滞定位

粘滞定位（一般用于页面导航的吸顶效果)

-当元素的position属性设置为sticky时，则开启了元素的粘滞定位

（1）以浏览器为参照物（体现固定定位特点）；

（2）占有原来位置,不会脱离文档流（体现相对定位特点）；

　　（3）粘滞定位可以在元素到达某个位置时，将其固定

(4)没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>导航条</title><style>ul{width: 800px;height: 50px;background-color: #ccc;margin: 50px auto;/* 开启粘滞定位 */position: sticky;top: 0px;}li{float: left;width: 25%;line-height: 50px;}</style></head><body style="height: 3000px;"><!-- 创建导航条的结构 --><ul><li>导航</li><li>导航</li><li>导航</li><li>导航</li></ul><div>常死为文评与收葬说不以帝，谓言上老畴，促人的家说文出藏，弄就回珍国徨吴，大之兴张其快，可韩我娟承外此主得把善情吾一恼李韩才判，子太杀洪清同雷选得谓叩，别弟身饮故始韩你仇君，即罪因得陀且领王，方主善疾交，变生的落，的韩之气家上的了自秦者君未派乡，沫里当行谋，投时尤韩褒受，评大是，虽之掸在九好易与，设。</div></body>
</html>

5、绝对定位元素布局

水平布局

left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right

-当开启决定定位后，水平方向的布局等式就会加上left，right两个值

此时规则和之前一样，只是多添加了两个值

-当发生过度约束时

1:如果9个值中没有auto，则自动调整right值以使等式满足

2:如果有auto，则自动调整auto的值以使等式满足

-可设置auto的值

margin width left right

-四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,

若width为固定值 left right top bottom都为0，margin会均分四个方向值

从而使元素达到水平垂直居中 ****

—两个auto的情况

margin 和width为auto，调整width

margin 和left，right其中一个值为auto，调整left或right

width 和left，right其中一个值，调整left或right

left，right都为auto 调整right

—三个auto的情况

margin width left ===> 调整left

margin width right ===> 调整right

width left right ===> 调整right

—四个值auto的情况

width，right，left margin 调整right

总结：right>left>width>margin ****

垂直布局

等式也必须满足

总结： bottom>top>height>margin ****

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box1 {width: 400px;height: 400px;background-color: palegreen;position: relative;}.box2 {width: 100px;height: 100px;background-color: orange;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}</style></head><body><div class="box1"><div class="box2">1</div></div></body>
</html>

6、层级以及透明效果

1:如果定位元素的层级是一样，则下边的元素会盖住上边的

通过z-index属性可以用来设置元素的层级

可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级

层级越高，越优先显示

对于没有开启定位的元素不能使用z-index

2、设置元素的透明背景

opacity [əu'pæsiti] 可以用来设置元素背景的透明，

它需要一个0-1之间的值

0 表示完全透明

1 表示完全不透明

0.5 表示半透明

opacity与rgba设置透明度，两者的区别

1、opacity属性，rgba样式值

2、rgba样式值一般必须跟在特定的属性后，例如背景色，颜色

opacity 可以任意设置

3、继承性

opacity属性，有样式的继承

rgba样式值各设各的

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">.box1 {width: 100px;height: 100px;background-color: red;position: relative;z-index: 2;}/* 2:父元素的层级再高，也不会盖住子元素*/.box2 {width: 100px;height: 100px;background-color: rgba(135, 206, 235, 0.5);/* opacity: .8; */position: relative;left: 30px;bottom: 30px;z-index: 3;}</style></head><body><div class="box1"></div><div class="box2"></div><p style="background-color: rgba(255, 0, 0,.5);">不尝救而要同德修胜没五<span style="background-color: green;">应世遗其葬此，主。</span></p><p style="background-color: red; opacity: .5;">不尝救而要同德修胜没五<span style="background-color: green;">应世遗其葬此，主。</span></p></body>
</html>

CSS——定位、层级与透明效果相关推荐

Web前端知识CSS（CSS定位、CSS透明、阴影、边框圆角）
一.CSS 定位定位的作用普通文档流中块元素垂直排列,行内元素水平排列. 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置(自由的在某个盒子内移动位置或者固定在屏幕中的某 ...
CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位至于opacity的作用:转化图像的透明程度.值定义转换 ...
css设置背景半透明，文字不透明效果
设置背景半透明,文字不透明效果一.常见的错误做法最常见的做法就是: 1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的,严重影响视觉效果. 2.设置background-c ...
[css] rgba()和opacity这两个的透明效果有什么区别呢？
[css] rgba()和opacity这两个的透明效果有什么区别呢? 1.opacity 是属性,rgba()是函数,计算之后是个属性值: 2.opacity 作用于元素和元素的内容,内容会继承元素 ...
html 图片透明字不透明,CSS实现背景图片透明，文字不透明效果的两种方法
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
css实现html透明效果
CSS3草案中定义了{opacity: | inherit;}来声明元素的透明度,这已经得到了大多数现代浏览器的支持,而IE则很早通过特定的私有属性filter来实现的,所以HTML元素的透明效果已经 ...
CSS实现PNG图片背景透明效果
使用PNG图片作背景,但ie6不能显示PNG透明效果,所以要用AlphaImageLoader滤镜来实现. 在CSS文件中要注意图片相对路径:滤镜中的图片路径是相对页面文件,而其它的则是相对CSS文件 ...
html5 css透明效果,css中实现背景透明的三种方式
css中实现背景透明通常有如下3种方式,以下是这三种方式的不透明度为80%的写法: css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, g ...
【前端】CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...

CSS——定位、层级与透明效果

1、相对定位

2、绝对定位

3、固定定位

4、粘滞定位

5、绝对定位元素布局

6、层级以及透明效果

CSS——定位、层级与透明效果相关推荐

最新文章

热门文章