耿叔叔
前段之浮动、定位、z-index属性

一、浮动float

  • 理解浮动属性首先要搞清楚，什么是文档流？ 文档流：浏览器根据元素在html文档中出现的顺序，元素会自动从左向右，从上到下依次排列

浮动的两个特点：

1、浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

2、由于浮动框不在文档流中，所以文档流中的块级框表现得就像浮动框不存在一样

float：浮动方向（left、right、none）；

  • left：向左浮动

  • right：向右浮动

  • none：默认不浮动

# ps:html代码时没有缩进一说的 全部写在一行也可以
"""浮动主要就是用于页面布局的!!!"""

# 浮动带来的负面影响
"""会造成父标签塌陷!!!"""
解决浮动的负面影响
	1.再写一个div撑场面(不可取)
	2.关键字clear(可以使用)
    3.通用解决策略(推荐使用):只要父标签塌陷就使用
        .clearfix:after {
            content: '';
            clear: both;
            display: block;
        }
        # 谁塌陷就给谁加class属性
     
# 浏览器默认都是文本优先展示

#  浮动演示↓
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left; /*向左浮动*/
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left; /*向左浮动*/
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: right; /*向右浮动*/
        }
        .box4 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: right; /*向右浮动*/
        }
    </style>
</head>
<body>
<div class="box1">你好</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

二、定位 position

  • static：静态

    所有的HTML标签默认都是静态的static，无法改变位置，不能当作绝对定位的参照物，并且设置标签对象的 top、bottom、left 和 right属性是不起作用的

  • relative：相对定位

    相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

    注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

  • absolute：绝对定位(常用)

    相对于已经定过位的父标签做移动（如果没有父标签就以body为参照），元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

    重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

    另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。fixed（固定）

    注：当你不知道页面其它标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位，就用绝对定位。

  • fixed：固定定位（常用）

    相对于浏览器窗口固定在某个位置。对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

# 标签位置改变之后 原来的位置是否会空出来
	如果空出来了被其他标签自动占有 那么表示脱离否则不脱离
 

浮动、定位
	脱离文档流:
    	浮动、绝对定位、固定定位
    不脱离文档流:
    	相对定位

三、z-index 属性

  • 用于指定定位的元素的覆盖关系（设置其层叠顺序），值大的在外层展示

    设置元素的层叠顺序：

    1. z-index 值表示谁压着谁，数值大的压盖着数值小的，

    2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

    3. z-index值没有单位，就是一个正整数，默认的z-index值为0。如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁就在上面压着别人，定位了元素，永远压住没有定位的元素。

    4. 从父现象：父标签层级低无法展示，子标签层级再高也无法展示

      父元素没有z-index值, 那么子元素谁的z-index值大谁盖住谁 父元素z-index值不一样, 那么父元素谁的z-index值大谁盖住谁

z-index层叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠</title>
    <style>
        .father1 {
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;/*相对定位*/
        }
        .son1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute; /*绝对定位*/
            left: 300px;
            top: 300px;
            z-index: 2; /*子1的值大它就在上面*/
        }

        .father2 {
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative;
        }
        .son2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 350px;
            top: 50px;
            z-index: 1; /*子2的值小它就在下面*/
        }
    </style>
</head>
<body>
<div class="father1">
    <div class="son1"></div>
</div>

<div class="father2">
    <div class="son2"></div>
</div>
</body>
</html>

z-index层叠

img

从父现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>从父现象</title>
    <style>
        .father1 {
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;  /*相对定位*/
            z-index: 1;   /*父1比父2小*/
        }
        .son1 { /*子1被子2压盖着*/
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute; /*绝对定位*/
            left: 300px;
            top: 300px;
            z-index: 2; /*子1比子2大但是仍被压盖着*/
        }

        .father2 {
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative; /*相对定位*/
            z-index: 2; /*父2比父1大*/
        }
        .son2 { /*子2盖住子1*/
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute; /*绝对定位*/
            left: 350px;
            top: 50px;
            z-index: 1; /*子2比子1小但还是在外层*/
        }
    </style>
</head>
<body>
<div class="father1">
    <div class="son1"></div>
</div>

<div class="father2">
    <div class="son2"></div>
</div>
</body>
</html>

从父现象

img

透明度

rgba(124,124,124,0.5)
	只影响颜色
opacity:0.5
    影响颜色和字体
posted on 2022-02-14 16:05  耿蜀黍  阅读(153)  评论(0)  编辑  收藏  举报

Copyright © 2024 耿蜀黍
Powered by .NET 8.0 on Kubernetes Powered By博客园