CSS学习Day8之定位
定位
相对定位
- 不脱离标准文档流，可以调整元素
- 参考点：以原来的位置为参考点
<html>
<head><meta charset="utf-8"><title>相对定位title><style type="text/css">body{border: 1px solid orange;}div{width: 200px;height: 200px;color: #fff;}div.one{background-color: red;position: relative;/*相对定位*/top: 30px;left: 100px;}div.two{background-color: green;}div.three{background-color: blue;}style>
head>
<body><div class="one">Onediv><div class="two">Twodiv><div class="three">Threediv>
body>
html>
绝对定位
-
脱离标准文档流，不在页面上占位置
-
层级提高，有压盖现象
-
参考点：
- 单独给一个盒子设置绝对定位，以根元素页面左上角为参考点
- 相对于最近的非static祖先元素定位，那么以根元素页面左上角为参考点
-
布局方案：子绝父相
<html>
<head><meta charset="utf-8"><title>绝对定位title><style type="text/css">body{border: 1px solid orange;}.father{border: 1px solid black;position: relative;/*相对定位*/top: 30px;left:60px;}.one,.two,.three{width: 200px;height: 200px;color: #fff;}div.one{background-color: red;position: absolute;top: 200px;left: 200px;}div.two{background-color: green;width: 400px;}div.three{background-color: blue;}style>
head>
<body><div class="father"><div class="one">Onediv><div class="two">Twodiv><div class="three">Threediv>div>
body>
html>
小米搜索实战应用
body{margin: 0;
}
.site-header{width: 100%;height: 100px;
}
.container{width: 1226px;margin: 0 auto;
}
/*以下为logo的属性*/
.site-header .nav-logo{float: left;margin-top: 25px;
}
.nav-logo a{display: block;width: 56px;height: 56px;
}
.nav-logo img{width: 56px;height: 56px;
}
/*以下为列表的属性*/
.site-header .nav-list ul{list-style: none;/*清除li标签前面的点*/float: left;width: 820px;height: 88px;padding:12px 0 0 30px;margin: 0;
}
.nav-list li{float: left;
}
.clearfix::after{/*解决浮动带来的破坏性*/content: '';clear: both;display: block;
}
.nav-list a{text-decoration: none;color: #333;padding: 28px 10px 38px;display: block;
}
.nav-list a:hover{color: #ff6700;
}
/*以下为搜索框的属性*/
.site-header .site-search{float: right;width: 296px;margin-top: 25px;
}
.site-search form{position: relative;/*相对定位*/width: 296px;height: 50px;
}
.site-search form .content{width: 223px;height: 48px;border: 1px solid #e0e0e0;padding: 0 10px;/*其实将左右边框撑大了*/float: left;/*清除空白折叠带来的影响*/outline-color: #ff6700;
}
.site-search form .border:hover{border-color: #b0b0b0;
}
.site-search form .search{width: 51px;height: 51px;border: 1px solid #e0e0e0;float: left;/*清除空白折叠带来的影响*/margin-left: -1px;font-size: 20px;padding: 0px;
}
.site-search form .search:hover{background-color: #ff6700;border-color: #ff6700;outline-color: #ff6700;
}
.site-search form .search_hot_word{position: absolute;/*绝对定位*/top: 16px;right: 70px;font-size: 14px;
}
.site-search form .search_hot_word span{background-color: #eee;color: #757575;
}
.site-search form .search_hot_word span:hover{cursor: pointer;/*指针悬浮到span标签时变为小手*/background-color: #ff6700;color: #fff;
}
<html>
<head><meta charset="utf-8"><title>小米导航栏title><link rel="stylesheet" type="text/css" href="../css/11.小米商城导航栏.css">
head>
<body><div class="site-header"><div class="container clearfix"><div class="nav-logo"><a href="https://www.mi.com/index.html"><img src="../images/小米logo.png">a>div><div class="nav-list"><ul><li><a href="#">小米手机a>li><li><a href="#">Redmi红米a>li><li><a href="#">电视a>li><li><a href="#">笔记本a>li><li><a href="#">家电a>li><li><a href="#">路由器a>li><li><a href="#">智能硬件a>li><li><a href="https://www.mi.com/service/" target="_blank">服务a>li><li><a href="http://www.xiaomi.cn/" target="_blank">社区a>li>ul>div><div class="site-search"><form><input type="text" name="" class="content border"><input type="submit" name="" value="🔍" class="search border"><div class="search_hot_word"><span>小米9span><span>小米9 SEspan>div>form>div>div>div>
body>
html>
固定定位
- 脱离标准文档流，不在页面上占位置
- 层级提高，有压盖现象
- 一旦设置固定定位，在页面中滚动网页，固定不变
- 参考点：
- 以浏览器的左上角
- 应用：回到顶部，固定导航栏，小广告
<html>
<head><meta charset="utf-8"><title>title><style type="text/css">.box{width: 100px;height: 100px;background-color: red;color: #fff;}#one{position: fixed;top: 50px;left: 20px;}.outer{width: 500px;height:200px;overflow: scroll;padding-left: 200px;}style>
head>
<body><div class="outer"><p>月球的形成对于地球而言是一件大事，这是因为月球对地球生物的影响非常大，不仅引发了地球海洋的潮汐变化，还在夜晚为夜行性生物提供照明作用，以至于飞蛾在夜晚演化出了趋光性。在太阳系刚形成之初时，太阳系内的小行星，行星等发生碰撞是非常常见的事情，以至于至今在月球表面还留着大大小小的陨石撞击坑。p><p>之所以陨石撞击坑在地球上比较少见，是因为地球上的大气运动以及生物运动、板块运动等会擦除掉这些痕迹，比如：距今6500万年前撞击地球，导致恐龙灭绝的陨石坑，时至今日已经找不到它的踪迹。我们知道地球上曾经出现过五次生物大灭绝，其中绝大多数生物大灭绝都是由于地球环境的变化而引发，然而距今4.4亿年前奥陶纪生物大灭绝很可能是由伽马射线暴所引发。p><div class="box" id="one">Onediv>div>
body>
html>
小米商城固定侧方栏
.container{width: 1226px;height: 2000px;border: 1px solid orange;margin: 0 auto;
}
.site_bar{position: fixed;width: 27px;bottom: 100px;right: 17%;
}
.site_bar ul{list-style: none;/*清除li标签前面的点*/margin: 0;padding: 0;
}
.site_bar ul li{width: 25px;height: 39px;border: 1px solid #f5f5f5;background-color: #fff;border-top-color: #ffffff;/*防止a标签从上面溢出*/
}
.site_bar ul li.one{border-top-color: #f5f5f5;
}
.site_bar ul li a{display: block;width: 20px;height: 20px;margin: 9px 3px 10px 2px;
}
.site_bar ul li a img{width: 20px;height: 20px;
}
<html>
<head><meta charset="utf-8"><title>小米商城固定侧方栏title><link rel="stylesheet" type="text/css" href="../css/12.小米商城固定侧方栏.css">
head>
<body><div class="container">div><div class="site_bar"><ul><li class="one"><a href="#"><img src="../images/小米商城固定侧方栏1.png">a>li><li><a href="#"><img src="../images/小米商城固定侧方栏2.png">a>li><li><a href="#"><img src="../images/小米商城固定侧方栏3.png">a>li><li><a href="#"><img src="../images/小米商城固定侧方栏4.png">a>li><li><a href="#"><img src="../images/小米商城固定侧方栏5.png">a>li>ul>div>
body>
html>
浮动和定位对行内元素的影响
<html>
<head><meta charset="utf-8"><title>浮动和定位对行内元素的影响title><style type="text/css">/*span{float: left;background-color: red;width: 200px;height: 200px;}*//*span{position: relative;background-color: red;width: 200px;height: 200px;*//*span{position: absolute;background-color: red;width: 200px;height: 200px;*//*span{position: fixed;background-color: red;width: 200px;height: 200px;*/style>
head>
<body><span>我是行内span>body>
html>
- 设置浮动，绝对定位和固定定位都可以使行内元素设置宽高
- 设置相对定位不可以使行内元素设置宽高
- **结论：**元素脱离标准文档流之后就可以设置宽高
- **注意：**行内元素转为块级元素未脱离标准文档流
z-index属性
- 默认值为auto，可以修改为其他整数
- 谁的值大，谁就层级越高
- 注意：只能应用到定位的元素之上
- 从父现象：给父级标签设置的层级权重大于子级标签
<html>
<head><meta charset="utf-8"><title>z-index的讲解title><style type="text/css">.a{position: relative;width: 200px;height: 40px;background-color: #C3FFFB;border: 3px solid #3962FE;z-index: 3;}.b{position: relative;width: 200px;height: 40px;background-color: #C3FFFB;border: 3px solid #3962FE;top: -30px;left: 50px;z-index: 2;}.c{position: relative;width: 200px;height: 40px;background-color: #C3FFFB;border: 3px solid #3962FE;top: -50px;left: 100px;z-index: 1;}style>
head>
<body><div style="position: relative; z-index: 10"><div class="a">Adiv>div><div style="position: relative; z-index: 15"><div class="b">Bdiv>div><div class="c">Cdiv>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！