CSS定位

实力比头发更重要

已于 2022-08-20 17:20:24 修改

阅读量380

点赞数

分类专栏： Web前端开发文章标签： css 前端 css3

于 2022-08-20 17:18:13 首次发布

本文链接：https://blog.csdn.net/qq_62217723/article/details/126441308

版权

Web前端开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

定位
练习--二级标题

定位

定位：手动控制元素在包含块中的精准位置

涉及CSS属性：position

一、position属性

-默认值：static，静态定位（不定位）
-relative：相对定位
-absolute：绝对定位
-fixed：固定定位

一个元素，只要position的取值不是static，认为该元素是一个定位元素

定位元素会脱离文档流（相对定位除外）

一个脱离了文档流的元素：

文档流中的元素摆放时，会忽略脱离了文档流的元素
文档流中元素计算自动高度时，会忽略脱离了文档流的元素

二、相对定位

不会导致元素脱离文档流，只是会让元素在原来的位置上进行偏移

可以通过四个CSS属性设置其位置：

left
right
top
bottom
盒子的偏移互惠对其他盒子产生影响

三、绝对定位

宽高为auto，适应内容
包含块变化：找祖先元素中第一个定位元素,若找不到，则它的包含块是整个网页（初始化包含块）

四、固定定位

其他情况和绝对定位完全一样

包含块不一样：固定为视口（浏览器的可视窗口）

五、定位下的居中

某个方向居中：

定宽（高）
将左右（上下）距离设置为0
将左右（上下）margin设置为auto
绝对定位和固定定位中，margin为auto，会自动吸收剩余空间

六、多个定位元素重叠时

堆叠上下文

设置z-index，通常情况下，该值越大，越靠近用户；只要定位元素设置z-index有效，z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖

补充

绝对定位、固定定位元素一定是块盒
绝对定位、固定定位元素一定不是浮动
没有外边距合并

练习–二级标题

1、二级菜单.html

<!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>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/menu.css">

</head>
<body>
    <header class="header">
        <ul class="topnav clearfix">
            <li><a href="">Lororibe.</a></li>
            <li><a href="">Quibusdam</a></li>
            <li><a href="">Nullaunt</a></li>
            <li><a href="">客户服务</a>
            <div class="submenu">
               <ul>
           <li>hhh</li>
           <li>kkk</li>
           <li>nn</li>
           <li>iio</li>
           <li>iaish</li>
               </ul>
            </div>
            </li>
            <li><a href="">Quam</a></li>
        </ul>
    </header>
</body>
</html>

2、reset.css

/*通用的  */
h1{
    font-size:1em;
    font-weight:normal;
}

ol,
ul{
    list-style:none;
}
blockquote,
q{
    quotes:none;
}
blockquote:before,
blockquote:after,
q::before,
q::after{
    content:'';
    content:none;
}

table{
    border-collapse: collapse;
    border-spacing: 0;

}
a{
    text-decoration:none ;
    color:inherit;
}

3、menu.css

.clearfix::after{
content:"";
display: block;
clear:both;
}
.header{
   color:#999;
   background:#e3e4e5;
    height:40px;
    line-height: 40px;
  /*  position:fixed;
    width:100%;
    left:0;
    top:0;*/
}
/* 表示只是选中子元素 */
.header .topnav>li{
    float:left;
    /* 注意高度坍塌 */
    margin:0 20px;
    width:150px;
    text-align: center;
    /* background-color: lightblue; */
    height:40px;
    box-sizing:border-box;
    position: relative;
}
.header .topnav>li:hover{
    background: #fff;
    border:2px solid #ccc;
    border-bottom: none;
    line-height: 36px;
}
.header .topnav>li .submenu{
    text-align: left;
    line-height:1.5;
    width:300px;
    /* 不生成盒子 */
    display: none;
    border:2px solid #ccc;
    box-sizing:border-box;
    position:absolute;
    right:-2px;
    background-color: #fff;
}
.header .topnav>li:hover .submenu{
    display:block;
}
.header .topnav>li:hover::after{
    content:"";
    position:absolute;
    width:100%;
    height:5px;
    bottom:0;
    left:0;
    background: #fff;
}