问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

【css】position:absolute;是相对于那个元素定位？

头像
x_hola
    66617118145

    w3school说：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    但是下面代码里的img和input怎么相对于body定位了？

    <script src="jquery-1.12.1.js" type="text/javascript"></script>
  <style>
    *{margin:0;border:0;padding:0;}
    .head-photo
        {
            margin-top:100px;
            margin-left:100px;
            width:100px;
            height:120px;
            border:5px solid green;
            text-align:center;
        }
    .head-photo img
        {
            position:absolute;
            top:15px;
            left:15px;
            display:none;
            z-index:10;
        }
    
    .upload-file
        {
            position:absolute;
            top:15px;
            left:15px;
            width:70px;
            height:48px;
            overflow: hidden;
            filter:alpha(opacity=0);
            opacity:0;
            z-index:15;
        }
  </style>
  <script>
    $(document).ready(function(){
        $('.head-photo').mouseover(function(){
            $('.x1').css('display','inline-block')}
    );
        $('.head-photo').mouseout(function(){
            $('.x1').css('display','none')}
    );
    });
  </script>
 </head>
 <body>
 <div class='head-photo'>

    <img src='' width=50px height=70px />
    <input class='upload-file' type='file'>
    <img class='x1' src='head-camera.gif' />
    
 </div>
 </body>
    css
    阅读 17.9k
    5 个回答
    得票最新
    头像
    prototype_eva
      1.1k23457

      绝对定位一般都是和相对定位一起出现，如果父级元素没有相对定位position:relative;那么子级绝对定位会相对于body来定位

      头像
      Roger
        34212028

        你都说了：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
        元素默认的定位值是static，所以往上找参照元素一直到根元素了。
        请为.head-photo元素添加属性position: relative。

        头像
        guangpunba
          5.4k42754

          head-photo 设置相对定位，不设置它相对定位就会相对body定位

          头像
          邢爱明
            5k72135

            img和input的第一层父元素是div.head-photo，没有设置position属性的时候默认为static定位，再往上层就是顶层的body元素，因此是基于body元素定位计算left、top位置。

            解决方法是设置div.head-photo的position属性，一般情况下设置为relative就可以了。

            头像
            刘金梦
              1537

              你好，下面是对于你的问题的回答：

              1. 首先，设置绝对定位（position：absolute）的参照物是设置了position属性（position：static无效）的父（祖先）元素。你的代码中不符合这样的规则。
              2. 当没有可以作为参照物的父元素时，元素会做如下处理：（可以确定当绝对定位元素的所有祖先元素都没有有效的position定位时，不是以body和html为参照物的。）
                a. web页面最外层的约束为body，就是浏览器面板能看到的部分。
                b. body即可理解为文档流，从上到下，从左向右。
                c. 文档流超过了浏览器面板（可视区域），就会出现滚动条。
                d. absolute的定制，就会将元素脱离文档流，不占据文档流，元素将不出现在文档流中，当浏览器渲染时，不会出现滚动条。
                e. 在文档流“流动”时，浏览器屏幕（范围），会在文档流中截出一块区域。可以简记为“第一屏”。
                f. 当没有定制relative时，absolute（元素无论大小）即以此定位。
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题