设置绝对定位后为什么图片重叠

设置绝对定位后为什么图片重叠

58ad722700015c2a04910119.jpg

把上图设置float然后设置成绝对定位以后可以做成这个样子

58ad722800014f1005000262.jpg

但是到这个地方的时候还是向上面一样设置绝对定位以后图片就变成了下面这个样子，图片重叠在一起。这是为什么呀，代码对过了找不出错误，难道不同的图片对绝对定位还能不一样吗？要哭了！！不知道为什么。58ad7228000165d904260441.jpg
786542946 2017-02-22
源自：HTML5展望   3-2 作业题
238
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
提问者 786542946 2017-02-23 16:03:59

谢谢老师！

问题在css的46和58行的比较


html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Homework</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

<header>

<!--头部导航栏-->

<div>

<a href="index.html"><img src="img/logo.jpg"></a>

<nav>

<a href="#home" name="home">HOME</a>

<a href="#portfolio" name="portfolio">PORTFOLIO</a>

<a href="#team" name="team">TEAM</a>

<a href="#contact" name="contact">CONTACT US</a>

</nav>

</div>

</header>

<section>

<!--banner区-->

<img src="img/banner.jpg">

<h1>Welcome &nbsp to &nbsp Website</h1>

<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit</p>

</section>

<section id="portfolio">

<!--Portfolio区-->

<dl>

<dt>P r o t f o l i o</dt>

<dd>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut labore et<br>

dolore magna aliqua.Ut enim ad minim veniam</dd>

</dl>

<ul>

<li>ALL</li>

<li>WEB</li>

<li>SOFTWARE</li>

<li>WORKS</li>

<li>BRANDS</li>

</ul>

<img src="img/portfolio-nav-img.jpg">

</section>

<section>

<!--Stats区-->

<dl>

<dt>S t a t s</dt>

<dd>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut labore et <br>dolore magna aliqua.Ut enim ad minim veniam</dd>

</dl>

<div>

<dl>

<dt>Margins</dt>

<dd><img src="img/stats1.jpg"></dd>

<dd>1 2 , 0 0 0</dd>

</dl>

<dl>

<dt>Completed</dt>

<dd><img src="img/stats2.jpg"></dd>

<dd>5 , 6 8 1</dd>

</dl>

<dl>

<dt>Projects</dt>

<dd><img src="img/stats3.jpg"></dd>

<dd>4 3 2</dd>

</dl>

<dl>

<dt>Customers</dt>

<dd><img src="img/stats4.jpg"></dd>

<dd>8 6</dd>

</dl>

</div>

</section>

<section id="team">

<div name="team"></div>

<!--Team区-->

<dl>

<dt>T e a m</dt>

<dd>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut labore et<br>

dolore magna aliqua.Ut enim ad minim veniam</dd>

</dl>

<div>

<dl>

<dt>Abigall</dt>

<dd><img src="img/team1.jpg"></dd>

<dd>Lorem ipsum dolor sit amet,consectetur<br>

adipisic</dd>

</dl>

<dl>

<dt>Andy</dt>

<dd><img src="img/team2.jpg"></dd>

<dd>5Lorem ipsum dolor sit amet,<br>

consectetur adipisic</dd>

</dl>

<dl>

<dt>Jacqueline</dt>

<dd><img src="img/team3.jpg"></dd>

<dd>Lorem ipsum dolor sit amet,consectetur<br>

adipisic</dd>

</dl>

</div>

</section>

<section id="contact">

<!--Contact us区-->

<dl>

<dt>Contact Us</dt>

<dd>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut labore et<br>

dolore magna aliqua.Ut enim ad minim veniam</dd>

</dl>

<div>

<input type="text" id="name" placeholder="Full Name">

<input type="email" id="email" placeholder="Email"><br>

<input type="text" id="message" placeholder="Message"><br>

<input type="button" id="button" value="Submit Message">

</div>

</section>

<footer>

<div>

<p>Copyright © 2016 imooc.com All Rights Reserved.</p>

</div>

</footer>

</body>

</html>


CSS

* { font-family: Microsoft YaHei UI ; font-size: 14px ; margin: 0 ; padding: 0 ; border: none; }


a { text-decoration: nones; }


body { width: 100%; }


/* header */

header { position: relative ; height: 60px ; background: #2e2e2e; }


header > .container { position: relative ; width: 1200px ; margin: 0 auto; }


header > .container > a { position: absolute ; left: 110px ; display: block ; margin: 15px 0; }


header > .container > nav { float: right; }


nav > a { font-size: 14px ; line-height: 60px ; display: block ; float: left ; width: 110px ; height: 60px ; text-align: center ; color: #fff; }


nav > a:hover,

nav > a.active { color: #f46208; }


/* banner */

.banner { position: relative; }

.banner > img { display: block ; overflow: hidden ; width: 100% ; height: 460px ; margin: 0 auto; }

.banner > h1 { font-size: 48px ; font-weight: normal ; position: absolute ; top: 170px ; left: 380px ; display: block ; color: #fff; }

.banner > p { font-size: 14px ; position: absolute ; top: 250px ; left: 450px ; color: #fff; }


/* Protfolio */

.portfolio { width: 100%; }

.portfolio > dl { margin-top: 100px ; margin-bottom: 40px; }

.portfolio > dl > dt { font-size: 48px ; margin-bottom: 45px ; text-align: center ; color: #f46208; }

.portfolio > dl > dd { font-size: 14px ; text-align: center ; color: #000; }

.portfolio > ul { width: 590px ; margin: 0 auto; }


.portfolio > ul li { font-size: 20px ; float: left ; margin: 0 12px ; margin-bottom: 50px ; padding: 5px 10px ; list-style: none ; color: #f46208 ; border: solid 2px; }

.portfolio > ul li:hover { color: #fff ; border: solid 2px #f46208 ; background: #f46208; }


.portfolio > img { width: 100% ; height: 455px ; margin: 0 auto; }


/* Stats */

.stats > dl > dt { font-size: 48px ; margin: 100px 0 30px 0 ; text-align: center ; color: #f46208; }

.stats > dl > dd { font-size: 14px ; margin-bottom: 45px ; text-align: center ; color: #000; }


.stats > .count { width: 1000px ; margin: 0 auto; }

.stats > .count > dl { position: relative ; display: block ; float: left ; width: 180px ; height: 200px ; margin: 0 10px; }

.stats > .count > dl > dt { font-size: 18px ; position: absolute ; top: 70px ; left: 120px ; display: block ; width: 140px ; text-align: center; }

/* 这里的绝对定位图片没有重叠！！！！！！！！！！！！！！！！！ */

.stats > .count > dl > dd:first-of-type { position: absolute ; top: 0 ; left: 100px ; width: 180px ; text-align: center; }


.stats > .count > dl > dd:last-of-type { font-size: 30px ; font-weight: normal ; position: absolute ; top: 105px ; left: 100px ; display: block ; width: 180px ; text-align: center ; color: #f46208; }


.team { clear: both ; padding-top: 100px ; background: #2e2e2e; }


.team > dl > dt { font-size: 48px ; text-align: center ; color: #f46208; }

.team > dl > dd { font-size: 14px ; margin-top: 50px ; margin-bottom: 50px ; text-align: center ; color: #fff; }


.team > .introduction { height: 400px ; padding-left: 20%; }

.team > .introduction > dl { position: relative ; display: block ; float: left; }

/*问题在这里！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！*/

.team > .introduction > dl > dt { position: absolute ; top: 220px ; left: 120px ; color: #fff; }

.team > .introduction > dl > dd:first-of-type { position: absolute ; top: 250px ; left: 20px ; text-align: center ; color: #fff; }

.team > .introduction > dl > dd:last-of-type { position: absolute ; top: 250px ; left: 20px ; text-align: center ; color: #fff; }


/* Contact Us */

.contact_us { clear: both; }


.contact_us > dl > dt { font-size: 48px ; margin-top: 100px ; text-align: center ; color: #f46208; }


.contact_us > dl > dd { font-size: 14px ; margin: 50px 0 50px ; text-align: center ; color: #000; }

.contact_us > .input { margin: 20px 0 ; text-align: center; }

/* input */

#name { width: 320px ; height: 40px ; margin-right: 2px ; border: solid 1px #ccc; }

#email { width: 320px ; height: 40px ; border: solid 1px #ccc; }

#message { width: 650px ; height: 190px ; margin-top: 5px ; border: solid 1px #ccc; }

#button { width: 140px ; height: 40px ; margin: 20px 0 50px ; color: #fff ; background: #f46208; }

/* footer */

footer > .container { line-height: 75px ; height: 75px ; text-align: center ; color: #fff ; background: #000; }


0
收起回答
小于飞飞 2017-02-22 22:02:11

你好，可以把完整代码传上来，好检测问题呦。祝学习愉快。

0
收起回答
  • 提问者 786542946 #1
    老师帮忙看一下吧。我发了。麻烦了！
    2017-02-23 16:04:44
  • 小于飞飞 回复 提问者 786542946 #2
    你好，数据显示已经发送批复的作业，你在个人账户中作业统计数据，截个图发上来，好进一步确定问题
    2017-02-23 20:08:38
  • 提问者 786542946 回复 小于飞飞 #3
    作业我这里显示等待批阅。这是在做作业的时候发现的问题没有解决，只是用了别的方法弥补了一下，感觉做得不够好，想找到这个问题的原因，找了好长时间和前面的代码对照也没有找到问题。
    2017-02-23 20:38:03
点开查看后面2条评论
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

请问老师为什么三张图片重叠要用绝对定位，banner-slide然后还要相对banner盒子定位。
2 0 2
关于ul标签设置绝对定位
26 1 3
请问为什么要设置固定定位?li不是已经这么设置了吗？
9 0 6
绝对定位和相对定位使用及搭配
19 0 3
视频里的老师说，绝对定位的元素脱离了文档流，那么也就是不会占空间了？
0 0 6

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

了解课程

本课精华内容

问答 作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师