web前端：浮动和渐变色，定位position，元素的层叠顺序

作者:九幽无泪更新于： 2020-03-06 13:52:39

　　position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

　　浮动：float

　　是我们网页设计布局的一种

　　浮动可以有left左浮动right右浮动两种

　　浮动的特点：

　　脱离正常的文档流，原本的空间不占据，浮动的标签都具有块级标签的一些特点，可以手动设置宽高

　　如果有相邻的多个浮动的元素，那么后面浮动的元素会停靠在前面浮动元素的后面，如果剩余空间不够，则会另起一行显示

　　如果一个元素中所有的内容都浮动了，那么这个元素本身高度则没有了，如果想要让这个元素高度还在，需要自己手动设置高度

　　清除浮动：不是说把浮动的元素清理掉，而是清除浮动元素对其他元素的影响

　　1给父元素直接设置一个高度

　　2.设置clear:both;

　　设置背景的渐变色：

　　线性渐变：

　　background-image:linear-gradient(tobottom,#DA4601,#FEEEB6,#E46410);

　　径向渐变：

　　background-image:radial-gradient(red,blue,green80%);

　　定位：position

　　相对定位relative

　　参照物是自己原来的位置，不会脱离正常文档流，也就是说原本的位置依旧存在

　　所有的定位都可以给两个值

　　水平偏移位置：left或right

　　垂直偏移位置：top或bottom

　　绝对定位absolute子绝父相

　　参照物是有定位的距离元素最近的祖级元素，如果所有的祖级元素都没有定位，参照物是初始包含块

　　会脱离正常文档流，原本空间不存在

　　什么是初始包含块：就是浏览器一打开，用户能看到的窗口页面

　　固定定位fixed

　　参照物是视口（视口就是眼睛所看到的的这个窗口）

　　会脱离正常文档流，也就是说原本的位置不存在了

　　粘性定位（了解内容）sticky

　　设置定位元素的层叠顺序：

　　z-index:number;number越大表示越优先显示只有定位的元素才可以设置该样式

　　static是position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。