position:absolute相对于谁定位以及当溢出时怎么隐藏

来源:互联网 发布:印刷在线下单系统源码 编辑:程序博客网 时间:2024/04/29 17:40


 <!--绝对定位元素相对的元素是它最近的一个祖先,该祖先满足:position的值必须是:relative、absolute、fixed,
       若没有这样的祖先则相对于body进行定位。偏移值由其top、bottom、left、right值确定。
       而绝对定位的元素若超出其父元素的边界,要想将溢出的部分隐藏,则,想隐藏在哪个祖先里,
       该祖先必须同时设置position:relative/absolute/fixed和overflow:hidden的值-->


代码:

<html>
<head>
<style>
  
   .yy{width:180px;height:400px;background-color:#ff0000;position:relative;overflow:hidden;}
   .bb{width:150px;height:300px;background-color:#00ff00;position:relative;overflow:hidden;}
   .d1{width:200px;height:200px;background-color:#0000ff;position:absolute;top:10px;left:50px;}
  
</style>
</head>
<body>
  <div class="yy"> 
   <div class="bb">    
       <div class="d1">
  </div>  
   </div>
   </div>  
</body>
</html>

效果:



代码:

<html>
<head>
<style>
  
   .yy{width:180px;height:400px;background-color:#ff0000;position:relative;overflow:hidden;}
   .bb{width:150px;height:300px;background-color:#00ff00;}
   .d1{width:200px;height:200px;background-color:#0000ff;position:absolute;top:10px;left:50px;}
  
</style>
</head>
<body>
  <div class="yy"> 
   <div class="bb">    
   <div class="d1">
  </div>  
   </div>
   </div>  
</body>
</html>


效果:


0 0
原创粉丝点击