下面有问题
在写第三个我用决定定位的时候三个dl会到第一个dl位置重合，我给dl高度就好了，但是为啥第二个dl我在没有设置高度时候用绝对定位它不会重合到一个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<section class="main">
<aside>
<h1>Recent</h1><samp>Course</samp>
<dl>
<dt>Hyper Text Marlup Languange</dt>
<dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd>1</dd>
<dd>HTML is the standard markup Languange used to create web pages and its elements form the building blocks of all websites</dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd>2</dd>
<dd>Csscading Style Sheets(CSS) is a simple mechanism for adding style (e.g,fonts,colors,spacing) to Web</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd>3</dd>
<dd>JavaScript is a high-level,dynamic,untyped,and interpreted programming language.</dd>
</dl>
<dl>
<dt>Angular JS</dt>
<dd><img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png"></dd>
<dd>4</dd>
<dd>AngularJS is an open-source web application framework mainly maintained by Google and buy a community of individuals and ...</dd>
</dl>
</aside>
<article>
<h1>Welcome to</h1><samp>Massive Open Online Course!</samp>
<p>we provide the knowledge to help you cope with the changing woeld!</p>
<img src="http://img1.sycdn.imooc.com/climg//582e61180001ede703300130.jpg">
<p>We hope that all the students who love the internet can be more cinveninent access to learning resource,using the interent thinking to change our learning.</p>
<p>Focus on IT skill educantion MOOC,cansistent with the development trend of the interent down earth's MOOC.We are free. we only teach useful.we concentate on education.</p>
</article>
</section>
</body>
</html>
.main h1{
font-size: 30px;
display: inline;
margin-right: 10px;
}
.main samp{
color:#666;
font-size: 30px;
}
.main{
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.main > aside{
width: 550px;
float: left;
}
.main > article{
float:right;
width: 630px;
}
.main >aside>dl{
width: 480px;
position: relative;
height: 80px;
margin-bottom: 30px;
}
.main>aside>dl>dt{
position: absolute;
font-weight: bold;
left: 100px;
font-size: 1.1em;
z-index: 2;
text-decoration: underline;
}
.main>aside>dl>dd:first-of-type{
position: absolute;
left: -20px;
top: 5px;
z-index: 1;
}
.main>aside>dl>dd:nth-of-type(2){
font-size: 30px;
color: #fff;
position: absolute;
z-index: 2;
left: -4px;
top:10px;
}
.main>aside>dl>dd:last-of-type{
position: absolute;
left: 60px;
top: 30px;
}
.main >article>img{
width: 630px;
height: 200px;
}
.main >article>img,p{
margin-bottom: 20px;
}
我把dl高度删掉的情况
高度没加，我把最后一个dd注释掉，他就不会重合
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星