zoukankan      html  css  js  c++  java
  • position定位产生的两个问题

    定位元素有下面的两个问题,在做页面时会经常碰到,为了备忘

    1.position:relative;如果一个元素的子元素或孙元素有position:relative属性的话,overflow:hidden;不能隐藏子元素,需要将这个元素设置position:relative;(IE6)

    例:

    <style type="text/css">

       .test1{200px;overflow:hidden;}

      .test2{8000px;position:relative;}

    </style>

    <div class="test1">

           <div class="test2"></div>

    </div>

    2.position:absolute;定位元素的height:100%;那这个元素的高度是等于以谁为参考元素的高度

    例:

    <style type="text/css">

       .test1{position:relative;height:200px;}

      .test2{position:absolute;height:100%;top:0;left:0;}

    </style>

    <div class="test1">

           <div>

        <div class="test2"></div>

              sssssssssssss<br/>

             test<br/>

         </div>

    </div>

    那么此时:test2的高度是200px;因为test2已经脱离了正常文档流程,是以test1为基准对齐的,所以要按test1计算,如果给test2的父元素设置position:relative;那么test2的高度就是两行文字的高度

  • 相关阅读:
    ASP.NET Core 静态资源的打包与压缩
    算法
    字符串反转
    js 获取随机数
    AspNetCore MVC 跨域
    add digits
    1-bit and 2-bit Characters
    删除字符串中出现次数最少的字符
    洗牌
    哈夫曼编码
  • 原文地址:https://www.cnblogs.com/xiaohui108/p/2004254.html
Copyright © 2011-2022 走看看