*新闻详情页*/>
无效缘故
今日在写轮播图的情况下发现,overflow;hidden;居然能无效,发现缘故以下:父元素要想掩藏外溢的肯定精准定位的子元素,必须给父元素加1个精准定位;由于肯定精准定位的子元素会从内向外找寻有精准定位的父元素,找不到的话overflow:hidden;也会随之无效。
1研究竟
关键的事再说1遍,正如上述所言,overflow:hidden;无效的缘故是:父元素要想掩藏外溢的肯定精准定位的子元素,必须给父元素加1个精准定位;由于肯定精准定位的子元素会从内向外找寻有精准定位的父元素,找不到的话overflow:hidden;也会随之无效。
下面大家来试试:
(1)
<style> .wrapper{ width: 200px; height: 200px; background-color: red; overflow: hidden; } .content{ width: 200px; height: 200px; background-color: green; position: absolute; top: 100px; left: 100px; } </style> <body> <div class="wrapper"> <div class="content"></div> </div> </body>
当子元素为肯定精准定位时,很显著,overflow:hidden;无效了
(2)
<style> .wrapper{ width: 200px; height: 200px; background-color: red; overflow: hidden; position: relative; } .content{ width: 200px; height: 200px; background-color: green; position: absolute; top: 100px; left: 100px; } </style> <body> <div class="wrapper"> <div class="content"></div> </div> </body>
大家要是给父元素再加1个精准定位便可,absolue和relative都可以以(但是留意假如精准定位是absolute的话父元素会危害y轴正下方的元素),这样肯定精准定位的子元素就可以寻找这个父元素,overflow:hidden;也不容易无效
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 网站建设_创建网站_免费建站平台_智能建站_企业建网站 版权所有 (网站地图) 粤ICP备10235580号