问答博客资讯标签用户活动
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绝对定位问题

头像
enchanter
    2336
    <!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
    <style type="text/css">
        header {
            position: relative;
            border: 1px solid #e3e3e3;
            width: 300px;
        }

        header .time {
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #f6f6f6;
            width: 100%;
            padding: 5px;
        }
    </style>
    </head>
    <body>
        <header>
            <div class="title">
                <h1>哒哒哒</h1>
            </div>
            <div class="time">
                <time>2016/02/05</time>
            </div>
            <div class="content">
                <p>哈哈哈哈</p>
            </div>
        </hedaer>
    </body>
</html>

    浏览器显示结果

    以上图片是代码在浏览器浏览的结果。
    图片中有两个问题：
    一、在.time中加入padding后，宽度会大于100%，背景颜色超出。
    二、.time使用绝对定位到header的底部，但是会遮住.content的内容。

    以上代码参考：Theme Preview
    图片描述
    参考红框圈起来那。

    请问这两个问题该如何解决？谢谢！

    csshtml
    阅读 3.9k
    2 个回答
    得票最新
    头像
    司想君
      1.2k29
      ✓ 已被采纳

      第一个问题，可以设box-size:border-box;第二个问题，position脱离文档流当然会遮住。这个地方给父容器设padding-bottom

      头像
      ghostcode
        85441721

        第一个问题，可以在给.time嵌套一div，设置宽度为100%，然后在设置其padding值，此时就不会超出父元素了。
        第二个问题，设置了绝对定位后，可以给它再设置z-index小于0的值。就不会覆盖其它元素了。最好把.content设置一个底外边距，否则会与time的文字重叠。

        html：

        <header>

            <div class="title">
        <h1>哒哒哒</h1>
    </div>
    <div class="time">
        <div class="time-first">
            <time>2016/02/05</time>
        </div>
    </div>
    <div class="content">
        <p>哈哈哈哈</p>
    </div>
</header>
css样式：
 header {
        position: relative;
        border: 1px solid #e3e3e3;
        width: 300px;
    }

    .time {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #f6f6f6;
        width: 100%;
        z-index: -1;
    }
    .time-first{
        padding: 5px;
        width: 100%;
    }
    .content{
        margin-bottom: 50px;
    }
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题