本文详细介绍了HTML/CSS中的定位技术，包括相对定位、绝对定位、固定定位和粘滞定位的概念、特点及应用场景。重点讲解了定位的层级、偏移量设置以及在布局中的应用。还提到了如何设置元素的层级和透明效果，并以京东顶部导航条为例展示了实际应用。
01.相对定位
布局
文档流 margin 浮动 定位
定位：
更加高级的布局手段
- 定位指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素- 通过position属性来设置元素的定位
-可选值：
static： ['stætik] 默认值，元素没有开启定位
relative： ['relətiv] 开启元素的相对定位
absolute： ['æbsəlju:t] 开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
sticky： ['stiki] 开启元素的粘滞定位相对定位：
当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型
1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联偏移量：
当开启了元素的定位（position属性值是一个非static的值）时，
可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动
left：元素向右偏移量，
right：元素向左偏移量
top：元素向下偏移量
bottom：元素向上偏移量可设正值，也可设负值
通常偏移量只需要使用两个就可以对一个元素进行定位，
一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
width: 600px;
height: 600px;
border: 5px solid rgb(56, 56, 56);
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
/* float: left; */
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
left: 100px;
/* right: 100px; */
/* bottom: 200px; */
top:100px
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
}
.s1 {
/* width: 200px;
height: 200px; */
background-color: yellow;
position: relative;
bottom: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">我是一个span</span>
</div>
</body>
</html>
02.绝对定位
当position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位：
1.开启绝对定位，会使元素脱离文档流
2.绝对定位会改变元素的性质，不在区分块还是行内，更类似行内块元素
3.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
4.绝对定位会使元素提升一个层级
5.绝对定位是相对于离他最近的包含块定位的
（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）
包含块：containing block
-正常情况下：
离当前元素最近的祖先块元素
-定位情况下：
离他最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
html （根元素，初始包含块）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.outer {
width: 600px;
height: 600px;
border: 5px solid black;
}
.box1 {
width: 100px;
height: 100px;
background-color: orange;
/* 开启元素的绝对定位 */
position: absolute;
top: 0px;
left: 0px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
}
.box3{
width: 400px;
height: 400px;
background-color: pink;
position: relative;
overflow: hidden;
}
.box4{
width: 300px;
height: 400px;
background-color: blue;
position: absolute;
margin-top: 100px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="box3">
<div class="box4">
<div class="box1"></div>
<!-- <div class="box2"></div> -->
</div>
</div>
</div>
</body>
</html>
03.固定定位
当元素的position属性设置fixed时，则开启了元素的固定定位
（1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；
（2）以浏览器为参照物，和父元素没有任何关系；
（3）固定定位不占有原来的位置，即脱离标准流 ,改变元素的性质
(4)应用场景
- 固定导航
- 固定侧边栏
- 广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.outer {
width: 600px;
height: 600px;
border: 5px solid black;
}
.box1 {
width: 200px;
height: 200px;
background-color: orange;
position: fixed;
left: 0px;
top: 0px;
}
.box2{
width: 400px;
height: 400px;
background-color: burlywood;
position: relative;
}
</style>
</head>
<body style="height: 5000px">
<div class="outer">
<div class="box2">
<div class="box1"></div>
<span>否苦于毒至帝龄亲国。</span>
</div>
</div>
</body>
</html>
04.粘滞定位
粘滞定位 （一般用于页面导航的吸顶效果)
-当元素的position属性设置为sticky时，则开启了元素的粘滞定位
（1）以浏览器为参照物（体现固定定位特点）；
（2）占有原来位置,不会脱离文档流（体现相对定位特点）；
（3）粘滞定位可以在元素到达某个位置时，将其固定
(4)没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>导航条</title>
<style>
ul{
width: 800px;
height: 50px;
background-color: #ccc;
margin: 50px auto;
/* 开启粘滞定位 */
position: sticky;
top: 0px;
}
li{
float: left;
width: 25%;
line-height: 50px;
}
</style>
</head>
<body style="height: 3000px;">
<!-- 创建导航条的结构 -->
<ul>
<li>导航</li>
<li>导航</li>
<li>导航</li>
<li>导航</li>
</ul>
<div>
常死为文评与收葬说不以帝，谓言上老畴，促人的家说文出藏，弄就回珍国徨吴，大之兴张其快，可韩我娟承外此主得把善情吾一恼李韩才判，子太杀洪清同雷选得谓叩，别弟身饮故始韩你仇君，即罪因得陀且领王，方主善疾交，变生的落，的韩之气家上的了自秦者君未派乡，沫里当行谋，投时尤韩褒受，评大是，虽之掸在九好易与，设。
</div>
</body>
</html>
05.绝对定位元素布局
水平布局
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
-当开启决定定位后，水平方向的布局等式就会加上left，right两个值
此时规则和之前一样，只是多添加了两个值
-当发生过度约束时
1:如果9个值中没有auto，则自动调整right值以使等式满足
2:如果有auto，则自动调整auto的值以使等式满足
-可设置auto的值
margin width left right
-四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,
若width为固定值 left right top bottom都为0，margin会均分四个方向值
从而使元素达到水平垂直居中 ****
—两个auto的情况
margin 和width为auto， 调整width
margin 和left，right其中一个值为auto，调整left或right
width 和left，right其中一个值， 调整left或right
left，right都为auto 调整right
—三个auto的情况
margin width left ===> 调整left
margin width right ===> 调整right
width left right ===> 调整right
—四个值auto的情况
width，right，left margin 调整right
总结：right>left>width>margin ****
垂直布局
等式也必须满足
总结： bottom>top>height>margin ****
<!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>
.box1 {
width: 400px;
height: 400px;
background-color: palegreen;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">1</div>
</div>
</body>
</html>
06.层级以及透明效果的设置
1:如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
层级越高，越优先显示
对于没有开启定位的元素不能使用z-index
2、设置元素的透明背景
opacity [əu'pæsiti] 可以用来设置元素背景的透明，
它需要一个0-1之间的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
opacity与rgba设置透明度，两者的区别
1、opacity属性，rgba样式值
2、rgba样式值一般必须跟在特定的属性后，例如背景色，颜色
opacity 可以任意设置
3、继承性
opacity属性，有样式的继承
rgba样式值 各设各的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
z-index: 2;
}
/* 2:父元素的层级再高，也不会盖住子元素*/
.box2 {
width: 100px;
height: 100px;
background-color: rgba(135, 206, 235, 0.5);
/* opacity: .8; */
position: relative;
left: 30px;
bottom: 30px;
z-index: 3;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<p style="background-color: rgba(255, 0, 0,.5);">
不尝救而要同德修胜没五
<span style="background-color: green;">应世遗其葬此，主。</span>
</p>
<p style="background-color: red; opacity: .5;">
不尝救而要同德修胜没五
<span style="background-color: green;">应世遗其葬此，主。</span>
</p>
</body>
</html>
07.京东顶部导航条实例
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东顶部导航条</title>
<link rel="stylesheet" href="./index.css">
<style>
body{
/* 设置字体 */
font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
/* 利用伪类解决高度塌陷的问题 */
.clearfix::before,
.clearfix::after{
content:"";
display:table;
clear:both;
}
/* 设置外部容器的样式 */
.top-bar-wrapper{
/* 设置宽度 */
width: 100%;
/* 设置高度 */
height: 30px;
/* 设置背景颜色 */
background-color:#e3e4e5 ;
/* 设置下边框 */
border-bottom:1px solid rgb(221,221,221);
/* 设置行高，使文字垂直居中 */
line-height: 30px;
}
/* 设置内部容器的样式 */
.top-bar{
/* 宽度 */
width: 1190px;
/* 设置水平居中 */
margin:0 auto;
position: relative;
}
/* 设置字体颜色 */
.top-bar a,
.top-bar span,
.top-bar i{
color:#999;
text-decoration:none;
}
/* 设置链接的颜色 */
.top-bar a:hover,
.top-bar .highlight{
color:#f10215;
}
/* 设置location */
.location{
float: left;
}
.city-list{
/* 设置城市下拉列表 隐藏 */
display: none;
background-color: white;
border:1px solid rgb(204,204,204);
border-top: none;
/* 绝对定位 */
position: absolute;
}
.myjd-list{
/* 设置我的京东下拉列表 */
display: none;
background-color: white;
border:1px solid rgb(204,204,204);
border-top: none;
/* 绝对定位 */
position: absolute;
}
.current-city,.current-myjd{
/* 给下拉列表设置边框 */
padding:0 10px;
border:1px solid transparent;
border-bottom: none;
/* 相对定位 */
position: relative;
}
/*
hover给父元素
父元素：hover 子元素{
子元素样式
}
*/
.location:hover .city-list
/* 鼠标移入显示左侧地址 */
{
display: block;
}
.myjd:hover .myjd-list{
/* 鼠标移入显示我的京东 */
display: block;
}
/* 设置current-city鼠标移入的效果 */
.location:hover .current-city{
background-color: white;
border:1px solid rgb(204,204,204);
border-bottom: none;
padding-bottom: 1px;
}
.myjd:hover .current-myjd{
background-color: white;
border:1px solid rgb(204,204,204);
border-bottom: none;
padding-bottom: 1px;
}
/* 设置shortcut右浮动 */
.shortcut{
float: right;
}
/* 设置li左浮动 */
.shortcut>li{
float: left;
}
/* 设置分割线 */
.shortcut .line{
width: 1px;
height: 10px;
background-color: #ccc;
margin:11px 15px 0;
}
/* 设置城市列表项属性 */
.city-list-page{
display: inline-block;
width: 40px;
height: 25px;
margin: 5px;
text-align: center;
}
.myjd-list-page{
display: inline-block;
width: 80px;
height: 25px;
margin: 5px;
text-align: center;
}
/* 设置设置城市列表项鼠标移入效果 */
.city-list-page:hover {
background-color: #ddd;
}
.myjd-list-page:hover {
background-color: #ddd;
}
.xiala{
/* 设置下拉图标的高度 */
height: 10px;
}
.myjd-list-up{
/* 设置我的京东下拉列表的分割线和间距 */
border-bottom:#ccc 1px solid ;
padding-top: 10px ;
padding-bottom: 10px ;
}
.myjd-list-down{
margin: 10px auto ;
}
</style>
</head>
<body>
<!-- 创建外部容器 -->
<div class="top-bar-wrapper">
<!-- 创建内部容器 -->
<div class="top-bar clearfix">
<!-- 左侧菜单 -->
<div class="location">
<div class="current-city">
<a href="#">
<!-- 导入定位svg图片 -->
<svg width="18" height="18" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" fill="white" fill-opacity="0.01"/>
<path d="M24 44C24 44 39 32 39 19C39 10.7157 32.2843 4 24 4C15.7157 4 9 10.7157 9 19C9 32 24 44 24 44Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M24 25C27.3137 25 30 22.3137 30 19C30 15.6863 27.3137 13 24 13C20.6863 13 18 15.6863 18 19C18 22.3137 20.6863 25 24 25Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
</svg>
<!-- 当前位置 -->
安徽</a>
</div>
<div class="city-list">
<ul>
<li>
<a href="#" class="city-list-page">北京</a>
<a href="#" class="city-list-page">上海</a>
<a href="#" class="city-list-page">天津</a>
<a href="#" class="city-list-page">重庆</a>
<a href="#" class="city-list-page">河北</a>
</li>
<li>
<a href="#" class="city-list-page">山西</a>
<a href="#" class="city-list-page">河南</a>
<a href="#" class="city-list-page">辽宁</a>
<a href="#" class="city-list-page">吉林</a>
<a href="#" class="city-list-page">黑龙江</a>
</li>
<li>
<a href="#" class="city-list-page">内蒙古</a>
<a href="#" class="city-list-page">江苏</a>
<a href="#" class="city-list-page">山东</a>
<a href="#" class="city-list-page">安徽</a>
<a href="#" class="city-list-page">浙江</a>
</li>
<li>
<a href="#" class="city-list-page">福建</a>
<a href="#" class="city-list-page">湖北</a>
<a href="#" class="city-list-page">湖南</a>
<a href="#" class="city-list-page">广东</a>
<a href="#" class="city-list-page">广西</a>
</li>
<li>
<a href="#" class="city-list-page">江西</a>
<a href="#" class="city-list-page">四川</a>
<a href="#" class="city-list-page">海南</a>
<a href="#" class="city-list-page">贵州</a>
<a href="#" class="city-list-page">云南</a>
</li>
<li>
<a href="#" class="city-list-page">西藏</a>
<a href="#" class="city-list-page">陕西</a>
<a href="#" class="city-list-page">甘肃</a>
<a href="#" class="city-list-page">青海</a>
<a href="#" class="city-list-page">宁夏</a>
</li>
<li>
<a href="#" class="city-list-page">新疆</a>
<a href="#" class="city-list-page">港澳</a>
<a href="#" class="city-list-page">台湾</a>
<a href="#" class="city-list-page">钓鱼岛</a>
<a href="#" class="city-list-page">海外</a>
</li>
</ul>
</div>
</div>
<!-- 右侧菜单 -->
<ul class="shortcut clearfix ">
<li>
<a href="#">你好，请登录</a>
<a class="highlight" href="#">免费注册</a>
</li>
<!-- 分割线设置 -->
<li class="line"></li>
<li><a href="#">我的订单</a></li>
<li class="line"></li>
<li >
<div class="myjd">
<div class="current-myjd">
<a href="#" >我的京东</a>
<img src="./图片素材/下拉列表_drop-down-list.png" alt="" class="xiala">
</div>
<div class="myjd-list">
<ul class="myjd-list-up">
<li>
<a href="" class="myjd-list-page">待处理订单</a>
<a href="" class="myjd-list-page">返修退换货</a>
<a href="" class="myjd-list-page">降价商品</a>
</li>
<li>
<a href="" class="myjd-list-page">我的问答</a>
<a href="" class="myjd-list-page">我的关注</a>
</li>
</ul>
<ul class="myjd-list-down">
<li>
<a href="" class="myjd-list-page">我的京豆</a>
<a href="" class="myjd-list-page">我的白条</a>
</li>
<li>
<a href="" class="myjd-list-page">我的优惠券</a>
<a href="" class="myjd-list-page">我的理财</a>
</li>
</ul>
</div>
</div>
</li>
<li class="line"></li>
<li><a href="#">京东会员</a></li>
<li class="line"></li>
<li>
<a class="highlight" href="#">企业采购</a>
<img src="./图片素材/下拉列表_drop-down-list.png" alt="" class="xiala">
</li>
<li class="line"></li>
<li>
<span>客户服务</span>
<img src="./图片素材/下拉列表_drop-down-list.png" alt="" class="xiala">
</li>
<li class="line"></li>
<li>
<span>网站导航</span>
<img src="./图片素材/下拉列表_drop-down-list.png" alt="" class="xiala">
</li>
<li class="line"></li>
<li>
<span>手机京东</span>
</li>
</ul>
</div>
</div>
</body>
</html>
扫一扫
520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
