CSS / 定位拓展+轮播图案例+元素的显示隐藏

winglamx

已于 2022-07-11 14:11:00 修改

阅读量606

点赞数

分类专栏：前端学习文章标签： css 前端

于 2022-02-15 17:19:53 首次发布

本文链接：https://blog.csdn.net/qq_39565174/article/details/122935735

版权

定位的拓展

定位叠放次序

z-index 来控制盒子的前后次序（z轴）

数值可以是正整数负整数或0 默认是auto 数值越大越靠上
如果属性值相同，则按照书写的顺序后来者居上
数字后面不能加单位
只有定位的盒子才有z-index

绝对定位的盒子居中算法

加了绝对定位的盒子不能通过margin auto来水平居中

left：50% 父容器宽度的一半

margin-left：负的绝对定位盒子宽度的一半

垂直居中

top：50%

margin-top：负的绝对定位盒子高度的一半

定位特殊特性

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

行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
块级元素添加绝对定位或者固定定位，如果不给宽度和高度，默认大小是内容的大小
浮动元素、绝对定位、固定定位元素是脱标的盒子，都不会触发外边距塌陷的问题

绝对定位固定定位会完全压住盒子

，压住所有内容

和浮动不同，浮动只会压住下面标准流的盒子，但是不会压住下面标准流盒子里的文字、图片，可以做文字环绕效果

如果定位的盒子同时有left属性又有right属性则执行left

同理top和bottom执行top

综合案例：轮播图

<!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>

最低0.47元/天解锁文章

winglamx

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS / 定位拓展+轮播图案例+元素的显示隐藏

目录定位的拓展定位叠放次序绝对定位的盒子居中算法定位特殊特性绝对定位固定定位会完全压住盒子元素的显示隐藏display（重要）visibilityoverflow 溢出定位的拓展定位叠放次序z-index 来控制盒子的前后次序（z轴）数值可以是正整数负整数或0 默认是auto 数值越大越靠上如果属性值相同，则按照书写的顺序后来者居上数字后面不能加单位只有定位的盒子才有z-index绝对定位的盒子居中算法加了绝对定位的盒子
复制链接

扫一扫