【CSS】 定位、锚点、透明

文章目录

【CSS】 定位、锚点、透明

一. 为什么需要定位？

定位可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置，并且可以压住其他盒子。

二. 定位三要素

  1. 确定目标元素
  2. 坐标系
  3. 定位流

三. position 定位属性和属性值

position 定位属性，检索对象的定位方式；

语法：position：static /absolute/relative/fixed/sticky/unset/inherit**(未设置是inherit和initial的结合)/initial(最初的，初始的)**

取值：

  1. static：默认值，无特殊定位，对象遵循HTML原则；

    选择器{
    position: static;
}

  2. absolute：绝对定位，将对象从文档流中完全拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置（基于非static）的父元素进行绝对定位；如果不存在这样的父对象，则依据 “浏览器” 进行定位，而其层叠通过z-index属性定义

    <!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>
            .grandfather {
                width: 800px;
                height: 600px;
                background-color: pink;
            }
            .father {
                width: 500px;
                height: 400px;
                background-color: blue;
                position: relative;
                top: 20px;
                left: 20px;
            }
            .son {
                width: 200px;
                height: 150px;
                background-color: green;
                position: absolute;
                bottom: 30px;
                right: 30px;
            }
        </style>
    </head>
    <body>
        <div class="grandfather">
            <div class="father">
                <div class="son"></div>
            </div>
        </div>
    </body>
</html>

    特点

    1. 参考位置：相对于包含块定位

      有定位属性并且属性值不是默认值的父元素

      I.如果父元素没有定位属性，那么该元素会继续往上找，直到找到最近的有定位属性的并且属性值不是默认值的祖先级元素

      II.如果绝对定位的元素的祖先级元素都没有定位属性，那么该元素会参考浏览器的左上角位置定位

    2. 支持负值

    3. 脱离文档流，在正常的文档流里面的位置不保留

    4. 子绝父相：子元素绝对定位，父元素相对定位

  3. relative ：相对定位遵循正常的文档流，将依据right，top，left，bottom（相对定位）等属性在正常文档流中 相对自身位置进行偏移 \color{red}{相对自身位置进行偏移} 相对自身位置进行偏移；其层叠通过z-index属性定义.

    <!-- diva会相对之前的位置向下向右偏移，divb仍保持原位（diva和divb重叠时，diva覆盖divb) -->
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
    .a {
        position: relative;
        top: 50px;
        left: 50px;
        background-color: red;
    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

    相对定位的特点：

    1. 相对于自身位置进行偏移

    2. 支持负值

    3. 不脱离文档流，在正常的文档流里面的位置会保留

  4. fixed：(固定定位)，类似于绝对定位的方式，但是它的参照物是浏览器的“可视”窗口，且脱离标准文档流；

    <!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>
            .father {
                width: 400px;
                height: 200px;
                background-color: #000;
            }
            .son {
                width: 100px;
                height: 100px;
                background-color: red;
                position: fixed;
                top: 50px;
                left: 50px;
            }
            .other {
                width: 100px;
                height: 100px;
                background-color: yellow;
                position: fixed;
                top: 30px;
                left: 30px;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son"></div>
            <div class="other"></div>
        </div>
    </body>
</html>

    固定定位的特点：

    1. 相对于浏览器的窗口定位
    2. 脱离文档流

  5. sticky：(粘性定位) 相对离自己最近且有滚动条的父元素做的定位

    粘性定位，该定位是相对定位和固定定位的结合，在跨越特定阈值前类似相对定位，之后类似固定定位。

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            .header {
                height: 100px;
                background-color: cyan;
            }
            .nav {
                height: 80px;
                background-color: yellow;
                position: sticky;
                top: 60px;
            }
            .main {
                height: 1000px;
                background-color: pink;
            }
            .footer {
                height: 100px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="header"></div>
        <div class="nav"></div>
        <div class="main"></div>
        <div class="footer"></div>
    </body>
</html>

    参考临界值 css3

    粘性定位的特点：

    1. 临界值（临界点内像固定定位，临界点外像相对定位）
    2. 不脱离文档流

浮动，绝对定位，固定定位的元素可以直接设置宽高

原因：脱离文档流，不再遵循默认文档流的元素类型

四. 偏移属性

只有设置了定位属性(属性不是默认值)的元素才可以添加偏移属性

定位属性和偏移属性必须一起使用

auto 默认值 元素处于原来文档流中的位置不变

数值

百分比

  • 相对定位:参考父元素的宽高
  • 绝对定位:参考包含块的宽高
  • 固定定位:参考窗口的宽高

注意：

  • 当一个元素设置了宽度、高度同时设置四个偏移属性的时候，以top和left为准
  • 当一个元素没有设置高度的时候，同时设置top和bottom，会拉伸自己以适应top和bottom
  • 当一个元素没有设置宽度的时候，同时设置left和right，会拉伸自己以适应left和right
  • 当一个元素没有设置高度和宽度的时候，同时设置top和bottom和left和right，会拉伸自己以适应top和bottom和left和right

五. 定位元素的层级属性

z-index : auto |number

设置定位对象的层叠顺序。

  • auto：默认值（等同于0）。遵循结构，后写的定位元素层的顺序靠上。

    直接设置没有单位的整数，也可以设置负值

    数值越大越靠上

    数值相同 看书写顺序

    负值不推荐

    跨度尽量10以上

    最大值是21亿多

  • number:无单位的整数值。可为负数，数值越大，层的顺序越靠上

说明：
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed ，sticky的对象。

六. 包含块的概念及作用

包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，浏览器是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明 position：relative;

如果我们的父素设置了 position:absolute; 那么子元素也会相对父元素来定义自己的位置。

绝对和相对定位的区别

1、参照物不同，绝对定位（absolute）的参照物是包含块（父级），相对定位的参照物是元素本身位置；

2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

七. 锚点链接的语法和应用场景

命名锚点的作用：在同一页面内的不同位置进行跳转。
锚点链接语法：
1)给元素定义命名锚记名
语法：

<标记 id="命名锚记名"> </标记>
<!-- 例 -->
<h1 id="top">顶部</h1>

2)命名锚记连接
语法：

<a href="#命名锚记名称">链接文本或图片</a>
<!-- 例 -->
<a href="#top">跳转到达位置</a>

不同页面的跳转(直接在要跳转页面路径)

<a href="./new.html">链接文本或图片</a>

不同页面锚点的跳转(直接在要跳转页面路径加上锚点的id)

<a href="./new.html#new">链接文本或图片</a>

八. 透明写法

  1. IE9以下浏览器写法：filter:alpha(opacity=value); opacity取值范围 0-100之间的整数值

    filter 滤镜

    filter 滤镜属性描述
    filter: grayscle(80%);灰色滤镜
    filter: blur(10px);高斯模糊
    <style>
    html {
        /* 灰色滤镜 */
        filter: grayscale(80%);
    }
    img {
        /* 高斯模糊 */
        filter: blur(10px);
    }
</style>

<body>
    <img src="./img/img001.jpg" alt="" />
</body>

  2. 兼容其他浏览器写法：opacity:0.5; (value的取值范围0-1 )

    opcity (透明度)

    opcity 0-1

    • 0 透明
    • 1 不透明

    opcity: 0;

    • 元素以及内容物全部消失不可见
    • 仍然占据空间
    • 结果不可逆

  3. 设置透明色：rgba(255,255,0,0.5)(最后一位值表示透明，取值范围0-1) 只支持IE8以上的浏览器