开发者社区> 问答> 正文

绝对定位的位置问题

为什么设置绝对定位和bottom:0之后,

标签却不在父元素的底部?之后加了margin:0后才可以?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .is{position: relative;width: 480px;}
        .childs{background-color: orangered;height: 200px;}
        .is .title{position: absolute;bottom:0;width: 100%;line-height: 45px;background-color: #000;opacity: 0.7;}
        .is .title a{margin-left: 20px;color: #fff;text-decoration: none;}
    </style>
</head>
<body>
    <div class="is">
      <div class="childs">去哪儿</div>
      <p class="title"><a href="#">视线</a></p>
    </div>
</body>
</html>

展开
收起
杨冬芳 2016-06-07 16:30:22 1975 0
1 条回答
写回答
取消 提交回答
  • IT从业

    p标签在浏览器环境下默认带有margin属性,而绝对定位并不影响margin值起作用。
    可以看一下这篇文章:浅谈块元素绝对定位的margin属性

    刚开始学习css布局的时候,先上手熟悉浏览器的开发者工具,比如chrome浏览器自带的,或者火狐浏览器的Firebug。Window下F12或Mac下option+command+i调出。通过开发者工具,自己就能学着分析碰到的百分之八九十的布局问题了……强烈建议!

    2019-07-17 19:30:27
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载