题解 | #定位 - absolute - 评注#
定位 - absolute - 评注
http://www.nowcoder.com/practice/3f6a442c38974273baf68b859deb1826
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
article {
margin-left: 10rem;
}
aside {
width: 5rem;
padding: 1rem;
color: white;
background-color: pink;
border-radius: 0.5rem;
position:absolute;
margin-left:-9rem;
}
aside:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border: 0.5rem solid pink;
border-bottom-color: transparent;
border-right-color: transparent;
right: -1rem;
top: 0.5rem;
}
.note {
color: green;
text-decoration-line: underline;
}
</style>
</head>
<body>
<section>
<article>
<p>煮豆燃豆萁,</p>
<p>豆在釜中泣。</p>
<p>本是同根生,</p>
<aside>豆秸怎能这样急迫地煎熬豆子呢?</aside>
<p class='note'>相煎何太急?</p>
</article>
</section>
</body>
</html>