css定位布局、元素的显示与隐藏

1、定位

1.1、为什么要定位？

经过前面的学习，我们都已经知道css为我们提供了三种传统的网页布局方式，分别是标准文档流、浮动、定位。三种布局方式相互配合，完成了我们想要的网页。那么定位究竟能实现怎样的效果呢？

提问：一些情况时有标准流或者浮动能实现吗？

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
当我们滚动窗口的时候，盒子是固定屏幕在某个位置。

以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。

所以：

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。

1.2、定位的组成与使用

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

1.2.1、定位模式

定位模式决定元素的定位方式，它通过css的position属性来设置，其值可以分为四个：

值	语义
`static`	静态定位
`relative`	相对定位
`absolute`	绝对定位
`fixed`	固定定位

1.2.2、边偏移

边偏移就是定位的盒子移动到最终的位置。有top、bottom、left、right4个属性。

边偏移属性	示例	描述
`top`	`top: 80px`	顶端偏移量，定义元素相对于其父元素上边线的距离
`bottom`	`bottom: 80px`	底端偏移量，定义元素相对于其父元素下边线的距离
`left`	`left: 80px`	左端偏移量，定义元素相对于其父元素左边线的距离
`right`	`right: 80px`	右端偏移量，定义元素相对于其父元素右边线的距离

1.2.3、静态定位 static (了解)

静态定位是元素的默认定位方式，无定位的意思

语法：

选择器 {
    
    
	position: static; /* 静态定位 */
}

静态定位按照标准流特性摆放位置，它没有边偏移。在实际开发中，静态定位在布局时很少用到。

1.2.4、相对定位 relative (重要)

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的(自恋型)。

语法：

选择器 {
    
    
	position: relative; /* 相对定位，相对于它原来的位置 */
}

图示：
在这里插入图片描述
相对定位的特点：(务必记住)

它是相对自己原来的位置来移动的。(移动位置的时候参照点是自己原来的位置)。
原来在标准流的位置继续占有，后面的盒子任然以标准流的方式排版。(不脱离文档流，继续保留原来的位置)

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。

示例：实现如下效果。
在这里插入图片描述
代码实现：

<!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>
        div {
     
     
            width: 200px;
            height: 200px;
        }
        .box1 {
     
     
            position: relative; /* 相对定位，相对于自己原来的位置 */
            top: 100px; /* 边偏移 */
            left: 100px;
            background: skyblue;
        }
        .box2 {
     
     
            background: red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

1.2.5、绝对定位 absolute (重要)

绝对定位是元素在移动位置的时候，是相对它祖先元素来说的 (拼爹型)。

语法：

选择器 {
    
    
	position: absolute; /* 绝对定位 */
}

绝对定位的特点： (务必记住)

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位 (Document文档)
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。如果父亲没有定位，往爷爷找，爷爷还没有定位就以浏览器为准。
绝对定位不再占有原先的位置。（脱标）

示例：实现如下效果(以父元素定位)
在这里插入图片描述
代码实现：

<!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>
        .father {
     
     
            position: relative; /* 相对定位，相对于自己原来的位置 */
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
     
     
            position: absolute; /* 绝对定位 */
            right: 0; /* 边偏移 */
            bottom: 0;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

1.2.6、子绝父相的由来

前面我们说过，相对定位常常给绝对定位"当爹"，也就是通常在父盒子中使用相对定位，在子盒子中使用绝对定位。这也是相对定位和绝对定位的使用场景。子绝父相的口诀也随之而来。

这个"子绝父相" 太重要了，是我们学习定位的口诀，是定位中最常用的一种方式。这句话的意思是：子级是绝对定位的话，父级要用相对定位

1、子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他兄弟盒子的排版。

2、父盒子需要加定位限制子盒子在父盒子内显示。

3、父盒子布局时，需要占有位置，因此父亲只能是相对定位。

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

案例：添加 HOT 和 NEW 模块
在这里插入图片描述
代码实现：

/* 父级元素 */
.box_bd ul li {
    
    
    position: relative;
    float: left;
    width: 228px;
    height: 270px;
    background-color: #ffffff;
    margin-right: 15px;
    margin-bottom: 15px;
}
/* 子级元素 */
.box_bd ul li em img {
    
    
    position: absolute;
    top: 4px;
    right: -4px;
}

1.2.7、固定定位 fixed (重要)

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器 {
    
    
	position: fixed; /* 固定定位 */
}

固定定位的特点：(务必记住)

以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系。
不随滚动条滚动。
固定定位不占有原先的位置

固定定位也是脱离文档流的。其实固定定位也可以看做是一种特殊的绝对定位。

示例：
在这里插入图片描述
代码实现：

<!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>
        .dj {
     
     
            position: fixed; /* 固定定位*/
            bottom: 0; /* 边偏移 */
        }
    </style>
</head>
<body>
    <div class="dj">
        <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/r_dj.png" alt="">
    </div>
</body>
</html>

固定定位小技巧：固定在版心右侧位置。

小算法：

让固定定位的盒子 left: 50%，走到浏览器可视区 (也可以看做版心) 的一半位置。
让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置。

就可以让固定定位的盒子贴着版心右侧对齐了。

1.2.8、粘性定位 sticky (了解)

粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的。

语法：

选择器 {
    
    
	position: sticky; /* 粘性定位，灵活控制固定位置 */
	top: 10px; /* 边偏移 */
}

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素 (固定定位的特点)
粘性定位占有原先的位置 (相对定位特点)
必须添加top、left、right、bottom其中一个才有效。

跟页面滚动搭配使用。兼容性较差，IE不支持。

示例：复制以下代码，滚动滚动条。体会粘性定位带来的效果

<!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>
        body {
     
     
            height: 3000px;
        }
        .nav {
     
     
            position: sticky; /* 粘性定位 */
            top: 0; /* 当盒子top边偏移等于0，就固变成固定定位 */
            width: 800px;
            height: 50px;
            background-color: skyblue;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="nav">我是导航栏</div>
</body>
</html>

1.2.9、定位小结

定位模式	是否脱标	移动位置	是否常用
`static` 静态定位	否	不能使用边偏移	很少
`relative` 相对定位	否 (占有位置)	相对于自身位置移动	常用
`absolute` 绝对定位	是 (不占有位置)	带有定位的父级	常用
`fixed` 固定定位	是 (不占有位置)	浏览器可视区	常用
`sticky` 粘性定位	否 (占有位置)	浏览器可视区	当前阶段少

1.2.10、定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)

语法：

选择器 {
    
    
	z-index: 1; /* z轴，控制盒子重叠后前后次序 */
}

1、数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。

2、如果属性值相同，则按照书写顺序，后来居上。

3、数字后面不能加单位。

4、只有定位的盒子才有 z-index属性。

示例：

<!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>
        .box {
     
     
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .gtq {
     
     
            background-color: skyblue;
            z-index: 1; /* z轴，默认是 auto ,此时此盒子次序最高所以显示此盒子 */
        }
        .xd {
     
     
            background-color: red;
        }
        .xr {
     
     
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box gtq">光头强</div>
    <div class="box xd">熊大</div>
    <div class="box xr">熊二</div>
</body>
</html>

1.3、定位的拓展

1.3.1、绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。

1、left: 50%;让盒子的左侧移动到父级元素的水平中心位置。

2、margin-left: -100px;让盒子向左移动自身宽度的一半。

例如：绝对定位的盒子水平垂直居中！

<!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>
        .box {
     
     
            position: absolute;
            /* 1、left 走 50% 父容器宽度的一半 */
            left: 50%;
            /* 2、margin-left 负值 往左边走 自己盒子宽度的一半 */
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

1.3.2、定位特殊特性

绝对定位和固定定位和浮动类似。

1、行内元素添加绝对或者固定定位，可以直接设置宽度和高度。

2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

示例：

<!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>
        .box {
     
     
            position: absolute;
            background-color: yellowgreen;
            /* 没有指定宽度和高度，所以不再独占一行 */
        }
    </style>
</head>
<body>
    <div class="box">abcd</div>
</body>
</html>

效果图：
在这里插入图片描述

1.3.3、脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。

1.3.4、绝对定位(固定定位)会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字或者图片。

但是绝对定位 (固定定位) 会压住下面标准流所有内容。

浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕效果。文字会围绕浮动元素。
在这里插入图片描述

例如：

<!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>
        div {
     
     
            /* 浮动的元素不会压住下面标准流的文字 */
            float: left;
            /* position: absolute; */
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div></div>
    <p>hello world</p>
</body>
</html>

效果图：
在这里插入图片描述
改成绝对定位：

 div {
    
    
    /* 浮动的元素不会压住下面标准流的文字 */
    /* float: left; */
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}

效果图：
在这里插入图片描述

2、元素的显示与隐藏

2.1、三种设置方式

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

本质：让一个元素在页面中隐藏或者显示出来。

我们可以通过三种属性设置元素的显示与隐藏：

display显示隐藏
visibility显示隐藏
overflow溢出显示隐藏

2.2、display属性

display属性用于设置一个元素如何显示。display属性值有很多个，我们只需记住常用的几个就好：

display: none; 隐藏元素( 此元素不会被显示，不再占有原来的位置)
display: block; 处理转换为块级元素之外，同时还有显示元素的意思。
inline 默认，此元素会被显示为内联元素，元素前后没有换行符。
inline-block; 行内块元素。（CSS2.1 新增的值）

display属性后面应用及其广泛，搭配 js 可以做出很多网页特效。

示例：

<!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>
        div {
     
     
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .box {
     
     
            display: none; /* 隐藏元素，不再占有原来位置 */
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box">
        hello java
    </div>
    <div>
        hello html
    </div>
</body>
</html>

2.3、visibility 可见性

visibility属性用于指定一个元素应可见还是隐藏。

语法：

visibility: 属性值; /* 设置元素的可见性 */

可选属性值：

属性值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit	规定应该从父元素继承 visibility 属性的值。

示例：使 <h2>元素不可见

h2 {
    
    
	visibility:hidden; /* 隐藏元素，并保留原来的位置，一定要与display区分开 */
}

visibility隐藏元素后，继续占有原来的位置！！

如果隐藏元素想要原来的位置，就用visibility: hidden;
如果隐藏元素不想要原来位置，就用display: none;(用处更多重点)

2.4、overflow 溢出

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么(隐藏溢出部分等)。

语法：

overflow: visible | auto | hidden | scroll

可选参数：
在这里插入图片描述
案例：

overflow: visible; /* 默认值，内容不会被修剪，会呈现在元素框之外 */

效果图
在这里插入图片描述

overflow: hidden; /* 内容会被修剪，溢出内容隐藏 */

效果图
在这里插入图片描述

overflow: auto; /* 溢出的时候才显示滚动条，不溢出就不显示滚动条 */
/* overflow: scroll; 溢出的部分显示滚动条，不溢出也显示滚动条 */

效果图
在这里插入图片描述
小结1：

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow: hidden;因为它会隐藏多余的部分。

小结2：

display显示隐藏元素，但是不保留位位置
visibility显示隐藏元素，但是保留原来的位置
overflow溢出显示隐藏，但是只是对于溢出的部分处理

3、综合案例练习

土豆网鼠标经过显示遮罩
在这里插入图片描述
核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。

代码实现：

<!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>
        .box {
     
     
            position: relative;
            width: 402px;
            height: 224px;
            margin: 100px auto;
        }
        .box img {
     
     
            width: 100%;
            height: 100%;
        }
        .box .mask {
     
     
            position: absolute;
            display: none; /* 隐藏遮罩层 */
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5) url('./images/arr.png') no-repeat center;
        }
        /* 当鼠标经过这个盒子，就让里面的遮罩层显示出来 */
        .box:hover .mask {
     
     
            display: block;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="mask"></div>
        <img src="https://m.ykimg.com/054F010160226EA4047BD7AA7DE68228?x-oss-process=image/resize,w_490/crop,x_0,y_0,w_490,h_276" alt="熊出没">
    </div>
</body>
</html>