HTML-CSS小知识——overflow使用细节
overflow
overflow需要元素在同一层级,若子元素脱离标准流,也就是层级高于父元素后,就不受父元素的overflow限制。
- 子元素img绝对定位,父元素a没有定位,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城</title>
<style>
*{
margin: 0;
padding: 0;
}
#top .top-banner{
height: 120px;
width: 100%;
}
#top .top-banner a{
display: inline-block;
/* position: relative; */
height: 120px;
width: 100%;
overflow: hidden;
}
#top .top-banner a img{
position: absolute;
height: 120px;
top: 0px;
left: -50%;
}
</style>
</head>
<body>
<header id="top">
<div class="top-banner">
<a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/49aa1df3471f88dd2235db8a40785977.jpg?w=5120&h=240" alt=""></a>
</div>
</header>
</body>
</html>
a标签的overflow:hidden没有成功把img超出部分隐藏,结果如下
出现有滚动条
- 子元素img绝对定位,父元素a相对定位,只需把前面的代码中position: relative;的注释去掉即可
这时无滚动条,成功隐藏了img的超出部分。
此文章如有不足之处,希望大家在评论区一起交流哦!谢谢大家!!!