Question

我已经简化了以下代码，以解决问题并使其易于在浏览器中运行。

基本上，我想要

childHeader 元素保持在绝对位置，与 parent 元素中的滚动无关（就像在示例中一样）
childHeader 以适应页面调整大小时父元素的宽度。

不幸的是，出于某种原因， childHeader 想要挂在 parent 元素的右侧。我该如何解决这个问题？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Calendar </title>       
        <style>
            .parent{
                width: 14.2857142857%;
                float: left;
                border: 1px solid rgb(217, 217, 217);
                overflow: scroll;
                height: 80px;
                text-align: center;
            }
            .childHeader {
                background-color: #000;
                color: #fff;
                font-size: 18px;
                position: absolute;
                width: 14.2857142857%;
                overflow: none;
            }
            .childBody {
                text-align: left;
                padding: 8px;
            }
            @media screen and (max-width: 768px) {
                .parent {
                    width: 100%;
                }
                .childHeader{
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="childHeader">
                30 June 2015
            </div>
            <div class="childBody">
                        info...<br>
                        info...<br>
                        info...<br>
                        info...<br>
                        info...<br>
            </div>
            <!-- repeat 6 times for the week -->
        </div>
    </body>
</html>

如何修复具有溢出其父元素的绝对位置的子元素

0 个答案: