绝对定位不起作用
来源：5-2 项目作业
慕仙2169824
2021-02-25 17:25:27
<!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="css/reset.css">
<link rel="stylesheet" href="css/css.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<!-- 顶部的蓝条和白条 -->
<header>
<!-- 顶部蓝条 -->
<div class=" top-bar">
<div class="center-wrap">
服务热线：400-8888-888
</div>
</div>
<!-- 慕家居导航条 -->
<nav>
<div class="center-wrap">
<img src="img/慕家居.png" alt="">
<ul>
<li>
<a href="">
<dl>
<dt>
<img src="img/home-gry.png" alt="">
<img src="img/home-white.png" alt="">
</dt>
<dd>网站首页</dd>
</dl>
</a>
</li>
<li>
<a href="">
<dl>
<dt><img src="img/abouts-gry.png" alt="">
<img src="img/abouts-white.png" alt="">
</dt>
<dd>关于我们</dd>
</dl>
</a>
</li>
<li>
<a href="">
<dl>
<dt>
<img src="img/kefu-gry.png" alt="">
<img src="img/kefu-white.png" alt="">
</dt>
<dd>服务建设</dd>
</dl>
</a>
</li>
<li>
<a href="">
<dl>
<dt>
<img src="img/chanpin-gry.png" alt="">
<img src="img/chanpin-white.png" alt="">
</dt>
<dd>产品中心</dd>
</dl>
</a>
</li>
<li>
<a href="">
<dl>
<dt>
<img src="img/fuwu-gry.png" alt="">
<img src="img/fuwu-white.png" alt="">
</dt>
<dd>服务大厅</dd>
</dl>
</a>
</li>
</ul>
<div class="soso-box">
<input type="text" placeholder="请输入搜索内容">
<a href=""><img src="img/search.png" alt=""></a>
</div>
</div>
</nav>
</header>
<!-- banner -->
<section class="banner">
<img src="img/banner01.png" alt="">
</section>
<!-- 商品区 -->
<!-- 这里，左右箭头使用了公共类 -->
<section class="goods content-part">
<div class="center-wrap">
<!-- 左箭头 -->
<div class="arrow-left">
<img src="img/prev_active.png" alt="">
</div>
<ul>
<li>
<dl>
<dt><img src="img/product01.png" alt=""></dt>
<dd>时尚卫生间墙面颜色
2029装饰设计</dd>
</dl>
</li>
<li>
<dl>
<dt><img src="img/product02.png" alt=""></dt>
<dd>现代北欧风格厨房装
2029饰效果图</dd>
</dl>
</li>
<li>
<dl>
<dt><img src="img/product03.png" alt=""></dt>
<dd>现代时尚北欧风格卧
2029室装饰画</dd>
</dl>
</li>
<li>
<dl>
<dt><img src="img/product04.png" alt=""></dt>
<dd>130平简约现代北欧
2029风格装修</dd>
</dl>
</li>
<li>
<dl>
<dt><img src="img/product05.png" alt=""></dt>
<dd>现代北欧风格小客厅
2029装修设计</dd>
</dl>
</li>
</ul>
<!-- 右箭头 -->
<div class="arrow-right">
<img src="img/next.png" alt="">
</div>
</div>
</section>
<!-- 了解我们 -->
<!-- 这里，标题使用了公共类 -->
<section class="understand-us content-part">
<div class="center-wrap ">
<!-- 标题部分“了解我们” -->
<div class="biaoti">
<p>了解我们</p>
<hr />
<p>about us</p>
</div>
<!-- 左边一列-关于我们 -->
<div>
<p>关于我们</p>
<p>慕家居装饰材料有限公司</p>
<p></p><!-- 空的块级元素做蓝线 -->
<p>慕家居家居装修网北欧风格家
具图片专区,是国内海量全面的
高质量北欧风格家具图片库…</p>
<p><a href=""><button>了解更多</button></a></p>
</div>
<!-- 中间一列-图片 -->
<div>
<img src="img/aboutus.png" alt="">
</div>
<!-- 右边一列-在线留言 -->
<div>
<a href="">
<div>
<img src="img/liuyan.png" alt="">
<dl>
<dt>在线留言</dt>
<dd>on-line message</dd>
</dl>
</div>
</a>
<a href="">
<div>
<img src="img/guanggao.png" alt="">
<dl>
<dt>广告经营</dt>
<dd>Advertising management</dd>
</dl>
</div>
</a>
<a href="">
<div>
<img src="img/wangluo.png" alt="">
<dl>
<dt>网络咨询</dt>
<dd>Network consultation</dd>
</dl>
</div>
</a>
</div>
</div>
</section>
<!-- 精品推荐 -->
<!-- 这里，标题和左右箭头使用了公共类 -->
<section class="Boutique-recommendation content-part">
<div class="center-wrap">
<!-- 标题部分“精品推荐” -->
<div class="biaoti">
<p>精品推荐</p>
<hr />
<p>Boutique recommendation</p>
</div>
<!-- 左箭头 -->
<div class="arrou-left">
<img src="img/prev_active.png" alt="">
</div>
<!-- 中间的三个图片 -->
<ul>
<li>
<img src="" alt="">
<div></div>
</li>
<li>
<img src="" alt="">
<div></div>
</li>
<li>
<img src="" alt="">
<div></div>
</li>
</ul>
<!-- 右箭头 -->
<div class="arrow-right">
<img src="img/prev_active.png" alt="">
</div>
</div>
</section>
<!-- 新闻中心 -->
<!-- 这里，标题使用了公共类 -->
<section class="news-center content-part">
<div class="center-wrap">
<!-- 标题部分“精品推荐” -->
<div class="biaoti">
<p>新闻中心</p>
<hr />
<p>press center</p>
</div>
<!-- 四个小版块 -->
<ul>
<li>
<div>
<img src="img/talk-bg.png" alt="">
<p>01</p>
</div>
<dl>
<dt>最新招标</dt>
<dd>重庆业主要求：一居室的户型，想把阳台利用起来，改成一室一厅的户型，业主表示已经请朋友把以前的装修敲了，现在基本是毛坯的状态……</dd>
</dl>
</li>
<li>
<div>
<img src="img/talk-bg.png" alt="">
<p>02</p>
</div>
<dl>
<dt>装修日记</dt>
<dd>终于在北京四环里贷款买了套两居室二手房，还是很欣喜的，为了装好它，我可真是费了心了，毕竟是自己以后的小家，所以我真是没少操心……</dd>
</dl>
</li>
<li>
<div>
<img src="img/talk-bg.png" alt="">
<p>03</p>
</div>
<dl>
<dt>装修百科</dt>
<dd>买房之后，无论是毛坯房还是留下二手房，很多业主都会选择进行装修。装修可以为你带来一个你喜欢的房屋，同时满足你需要的生活方式……</dd>
</dl>
</li>
<li>
<div>
<img src="img/talk-bg.png" alt="">
<p>04</p>
</div>
<dl>
<dt>热门搜索</dt>
<dd>选择防盗门最重要的就是工艺质量：应特别注意检查有无焊接缺陷，诸如开焊、未焊、漏焊等现象。看门扇与门框的配合是否密实，间隙是否均匀……</dd>
</dl>
</li>
</ul>
</div>
</section>
</body>
</html>
/* 定义版心的宽度和位置 */
.center-wrap{
width: 1200px;
/* text-align: center; */
margin: 0 auto;
}
/* 顶部区-蓝条样式 */
header .top-bar {
height: 40px;
font-size: 18px;
color: #FFFFFF ;
background-color: #0058AA ;
text-align: right;
line-height: 40px;
}
/* 因为在定义.center-wrap时设定了text-align：center，所以要在这里单独设置文本对齐 */
header .top-bar .center-wrap{
text-align: right;
}
/* 顶部区-导航条nav区域样式 */
header nav {
height: 121px;
/* 把导航区内部的浮动封在这个盒子中 */
overflow: hidden;
}
/* 顶部区-导航条样式 完毕*/
/* 设置导航nav内部的浮动:大标题和导航选项左浮动，搜索栏右浮动 */
header nav .center-wrap img,
header nav .center-wrap ul{
float: left;
}
header nav .center-wrap .soso-box{
float: right;
}
/* 设置导航nav内部的浮动:大标题和导航选项左浮动，搜索栏右浮动 完毕*/
/* 设置导航ul内部浮动 */
header nav .center-wrap ul{
overflow: hidden;
}
header nav .center-wrap ul li{
float: left;
}
/* 设置导航ul内部浮动 完毕*/
/* 设置导航nav内部的间距*/
header nav .center-wrap img{
margin:19px 109px 11px 0px;
/* width: 192px;
height: 91px; */
}
/* 注意这里导航选项上部空间的分配，如果直接写ul的margin-top：28px,后面当鼠标悬浮在li时，蓝色的圆环（也就是dt）放大时上面的部分会因为外层盒子的高度不够显示不出来，像圆被刀切了一点。所以要给dt的外层，dl上面一点高度，给dt做缩放动画使用 */
/* 如果看不懂注释，把第一个样式改成
header nav .center-wrap ul{
margin: 18px 58px 11px 0px;
}
去掉第二个选择器样式看看就知道了*/
header nav .center-wrap ul{
margin: 18px 58px 11px 0px;
}
header nav .center-wrap ul li a dl{
padding-top: 10px;
}
header nav{
padding-bottom: 11px;
/* 这个样式的作用是增加白色导航区域下面的空白部分，在
header nav .center-wrap ul{
margin: 18px 58px 11px 0px;
}中，第三个数值11px是无法留出下面的空隙的，因为margin不算在盒子的高度中，margin会和下面的banner图重叠一部分 */
}
/* 设置导航nav内部的间距：顺便写写ul>li里面的导航选项样式 */
header nav .center-wrap ul li{
width: 64px;
margin-right: 61px;
font-size: 16px;
}
header nav .center-wrap ul li a dl dt{
width: 50px;
height: 50px;
margin-left: 6px;
margin-bottom: 24px;
border-radius: 50%;
position: relative;
/* 在这里设置相对定位，把里面的小图标定位在正中间 */
}
header nav .center-wrap ul li a dl dt img{
width: 33px;
height: 33px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
}
header nav .center-wrap ul li a:visited{
color: #545454 ;
}
/* 设置导航nav内部的间距：顺便写写ul>li里面的导航选项样式 完毕*/
header nav .center-wrap ul li:last-child{
margin-right :0px;
}
/* 设置导航nav内部的间距 完毕*/
/* 当鼠标悬浮在nav选项上时:
1.图标外层出现一个蓝色的圆，并且蓝色的圆有放大缩小动画
2.灰色图标被隐藏，白色图标出现 */
/* 1.图标外层出现一个蓝色的圆，并且蓝色的圆有放大缩小动画 */
/* 定义缩放大小动画 */
@keyframes blue-ball-frame{
from{
transform: scale(1);
}
to{
transform: scale(1.05);
}
}
/* 调用动画 */
header nav .center-wrap ul li:hover dt{
background-color: #0058AA;
animation: blue-ball-frame 0.4s linear 0s infinite alternate;
}
/* 2.灰色图标被隐藏，白色图标出现 */
/* 正常状态下，第一个img标签（灰色标签）的z-index值比第二个img标签（白色标签）的z-index值大，即灰色标签盖住白色标签 */
header nav .center-wrap ul li dt img:first-child{
z-index: 1000;
}
header nav .center-wrap ul li dt img:nth-child(2){
z-index: -1000;
}
/* 悬浮状态下，第一个img标签（灰色标签）的z-index值比第二个img标签（白色标签）的z-index值小，即白色标签盖住灰色标签 */
header nav .center-wrap ul li:hover dt img:first-child{
z-index: -1000;
}
header nav .center-wrap ul li:hover dt img:nth-child(2){
z-index: 1000;
}
/* 当鼠标悬浮在nav选项上时:
1.图标外层出现一个蓝色的圆，并且蓝色的圆有放大缩小动画
2.灰色图标被隐藏，白色图标出现 */
/* 完毕 */
/* 搜索栏样式 */
header nav .center-wrap .soso-box{
width: 277px;
height: 37px;
margin: 50px 0 32px ;
overflow: hidden;
}
/* input文本框左浮动，文本框边框实心1px #D3D3D3;a按钮右浮动，两者的宽度刚好等于soso-box的宽度 */
header nav .center-wrap .soso-box input{
float: left;
width: 233px;
height: 37px;
/* 设置padding,给input里面的提示文字定位 */
padding: 12px 100px 9px 15px;
box-sizing:border-box;
margin: 0;
border: 1px solid #D3D3D3;
}
header nav .center-wrap .soso-box a{
float: right;
width: 44px;
height: 40px;
background-color: #0058AA ;
margin: 0;
}
header nav .center-wrap .soso-box a img{
width: 33px;
height: 33px;
margin: 3px 7px;
}
/* 搜索栏样式 完毕*/
/* 顶部区-导航条nav区域样式 完毕*/
/* banner区样式 */
.banner img{
width: 100%;
min-width: 1200px;
/*banner图的最小宽度和版心一样宽*/
/* margin-top: 11px; */
}
/* banner区样式 完毕 */
/* 商品区样式 */
.goods{
padding-top: 38px;
padding-bottom: 32px;
overflow: hidden;
}
/* 公共类：左箭头和中间的无序列表依次左浮动，右箭头右浮动,ul里面的列表项li再依次左浮动 */
/* 下面这个是商品区的个性样式 */
/* 设置无序列表项的宽高等样式和其中图片的宽高，li和img一样宽 */
.goods .center-wrap ul li{
width: 171px;
margin-right: 50px;
}
.goods .center-wrap ul li:last-child{
margin-right: 0;
}
.goods .center-wrap ul li dl dt img{
width: 171px;
height: 176px;
}
/* 设置无序列表到左右箭头的距离和字体样式 */
.goods .center-wrap ul{
margin:0 24px;
font-size: 18px;
color: #838383;
}
.goods .center-wrap ul li dl dt{
margin-bottom: 10px;
}
/* 设置左右箭头的水平居中 */
.goods .center-wrap>div{
height: 239px;
line-height: 239px;
vertical-align: middle;
}
/* 商品区样式 完毕*/
/* 了解我们版块 */
/* 左边一列-关于我们 、中间的图片依次左浮动，右边一列-在线留言 右浮动 */
.understand-us .center-wrap{
overflow: hidden;
padding-bottom: 82px;
/* padding-bottom: 82px;是内容下方的空间 */
}
/* 左边一列-关于我们 */
.understand-us .center-wrap div:nth-child(2){
float: left;
width: 238px;
}
/* “关于我们”4个蓝色大字 */
.understand-us .center-wrap div:nth-child(2) p:first-child{
color: #0058AA;
font-size: 26px;
margin-bottom: 10px;
vertical-align: top;
height: 34px;
}
/* 慕家居装饰材料有限公司 */
.understand-us .center-wrap div:nth-child(2) p:nth-child(2){
color: #5A5A5A ;
font-size: 21px;
margin-bottom: 10px;
/* border-bottom: 4px solid #0058AA;
width: 142px; */
}
/* 慕家居装饰材料有限公司下面的蓝线 */
.understand-us .center-wrap div:nth-child(2) p:nth-child(3){
width:142px;
height: 4px;
background-color: #0058AA;
margin-bottom: 20px;
}
/* "慕家居家居装修网北欧风格家 ..片库… "这段话*/
.understand-us .center-wrap div:nth-child(2) p:nth-child(4){
font-size: 18px;
color: #7B7C7C ;
margin-bottom: 27px;
}
/* "了解更多"按钮 */
.understand-us .center-wrap div:nth-child(2) p:last-child a button{
width: 130px;
height: 38px;
background-color: #0058AA;
font-size: 18px;
color: #FFFFFF ;
border: none;
}
/* 左边一列-关于我们 完毕*/
/* 中间一列-图片 */
.understand-us .center-wrap div:nth-child(3){
position: absolute;
width: 384px;
height: 256px;
/* float: left; */
left: 50%;
margin-left: -192px;
/* margin-right: 113px; */
}
/* 右边一列-在线留言 */
/* 让右边一列整体右浮动，并且相对于图片矮一点 */
.understand-us .center-wrap>div:last-child{
margin-top: 20px;
float: right;
width: 273px;
overflow: hidden;
}
/* 按理来说让外层的div右浮动就可以了，为什么去掉a的右浮动，整个一列会不显示呢 */
.understand-us .center-wrap div:last-child a{
float: right;
width: 273px;
height: 61px;
background-color: #0058AA ;
margin-bottom: 10px;
color: #FFFFFF;
vertical-align: middle;
overflow: hidden;
}
/* 右边一列里，每个篮筐里的小图标和文字都在篮筐范围内左浮动，然后设置间隙 */
.understand-us .center-wrap div:last-child a div img,
.understand-us .center-wrap div:last-child a div dl{
float: left;
}
.understand-us .center-wrap div:last-child a div img{
margin:14px 19px 13px 30px;
}
.understand-us .center-wrap div:last-child a div dl{
margin-top: 10px;
}
/* 右边一列-在线留言 完毕*/
/* 精品推荐版块 */
.Boutique-recommendation{
background: #EFF0F4;;
}
/* 设置标题部分的的个性样式 ，详情见base.css里的样式：标题部分，其中提示“”width、left、margin-left是个性样式，公共类的选择器是.content-part .center-wrap .biaoti p:last-child，所以个性类选择器是.Boutique-recommendation .center-wrap .biaoti p:last-child*/
.Boutique-recommendation .center-wrap .biaoti p:first-child{
background-color: #EFF0F4;
}
.Boutique-recommendation .center-wrap .biaoti p:last-child{
width: 230px;
}
.Boutique-recommendation .center-wrap .biaoti hr{
background-color: #EFF0F4;
}
/* 精品推荐版块 完毕*/
/* 新闻中心版块 */
/* 留出这个版块的上下空间 */
.news-center{
padding-top: 82px;
padding-bottom: 50px;
}
.news-center .center-wrap{
overflow: hidden;
}
/* 四个小块设置相同宽度，单数左浮动，双数右浮动,要把此浮动封在.news-center .center-wrap内 */
.news-center .center-wrap ul li{
width: 502px;
}
/* 单数左浮动 */
.news-center .center-wrap ul li:nth-child(2n+1){
float: left;
}
/* 双数左浮动 */
.news-center .center-wrap ul li:nth-child(2n){
float: right;
}
/* 四个小版块和标题之间的空隙 */
/* 因为标题已经设置了margin-bottom,所以用四个小板块的上外边距 */
.news-center .center-wrap ul{
margin-top: 70px;
}
/* 设置每个数字的样式，然后通过绝对定位压盖到蓝圆小图标上去 */
.news-center .center-wrap ul li div{
position: relative;
width: 65px;
height: 65px;
}
.news-center .center-wrap ul li div p{
color: #FFFFFF ;
font-size: 40px;
position: absolute;
}
/* 新闻中心版块 完毕*/
/* base.css */
/* 商品区 */
/* 左箭头和中间的无序列表依次左浮动，右箭头右浮动,ul里面的列表项li再依次左浮动 */
.content-part .center-wrap .arrow-left,
.content-part .center-wrap ul{
float: left;
}
.content-part .center-wrap .arrow-right{
float: right;
}
.content-part .center-wrap ul li{
float: left;
overflow: hidden;
}
/* 样式：标题部分 */
/* 以“了解我们”这个标题为例 */
/* 在biaoti这个div版块设置一个相对定位，方便标题里面的“了解我们”等四个大字下的英文绝对定位 */
.content-part .center-wrap .biaoti{
position: relative;
/* 这个属性留出标题与下面内容的距离 */
margin-bottom: 72px;
}
/* “了解我们” 四个大字 */
.content-part .center-wrap .biaoti p:first-child{
font-size: 32px;
background-color: #fff;
color: #696868;
width: 138px;
position: relative;
top: 20px;
padding-bottom: 10px;
left: 50%;
margin-left: -69px;
text-align: center;
}
/* “了解我们” 四个大字下面的英文的样式，并且用英文的下边框做蓝色横线 */
/* 因为做了绝对定位，width、left、margin-left是个性样式，这些数值影响横向的定位。要单独设置。这里的属性都是描述“了解我们”版块的标题的*/
.content-part .center-wrap .biaoti p:last-child{
font-size: 18px;
color: #9B9B9B;
width: 94px;
border-bottom:2px solid #0058AA ;
position: absolute;
left: 50%;
margin-left: -47px;
top: 60px;
padding-bottom: 11px;
text-align: center;
}
/* 样式：标题部分 完毕*/
写回答
1回答
-
同学你好，不是绝对定位不起作用，而是对于绝对定位理解错误。问题解答如下：
div中有img和p两个元素，p设置绝对定位，如果不设置方位属性，就会在自己的位置开始定位，不会飘到图片上面显示。如果想要数字在图片上显示，可以给p设置top和left值，如下
祝学习愉快！
0
相似问题