Css 绝对位置在相对位置内工作不正常

好的，我将这两个盒子与外div的底部对齐，使外div的位置相对，两个内盒子的位置绝对

这里有一个问题：

应该是这样的：

但是我需要将它放置在底部，以便h1标记开始在两行上缠绕，而另一行没有。。它开始变得参差不齐。当最小化浏览器时，您可以看到它

谢谢你在这方面的帮助。我不明白为什么文本总是离开黑色背景，而黑色背景不会环绕它

谢谢你的帮助

绝对位置意味着：相对于其父对象的绝对坐标，不考虑环绕、脱离黑色背景或其他因素。当绝对定位将元素从HTML流中拉出时：您的黑盒的行为就像它没有内容一样

在你的例子中，大的输入是到黑盒底部的20px，这就是你告诉它要做的

---

您必须对黑框进行样式化，使其更大，填充一些内容，然后您将看到两个输入保持在底部20px。

您需要设置divgraph顶部栏的高度

位置绝对元素不占用空间

---

您应该在图形顶部栏上设置高度

#graph-top-bar {
    height: 10px;
}

---

你有太多的css。。。你想用绝对位置来完成什么？我想你想要的是

#graph-top-bar {
                background: #474747;
                background: url(                data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                background: -moz-linear-gradient(top, #474747 0%, #000000 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#474747), color-stop(100%,#000000));
                background: -webkit-linear-gradient(top, #474747 0%,#000000 100%);
                background: -o-linear-gradient(top, #474747 0%,#000000 100%);
                background: -ms-linear-gradient(top, #474747 0%,#000000 100%);
                background: linear-gradient(to bottom, #474747 0%,#000000 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#000000',GradientType=0 );
                padding: 40px;
            }

            #graph-top-bar .brand {
                width: 48%;
                float: left;
            }

            .hidden-sm {
            }

            #graph-top-bar h1 {
                font-style: italic;
                font-size: 150%;
                word-wrap: break-word;
            }
            #graph-top-bar h4 {
                font-weight: normal;
                font-size: 80%;
                margin-top: -5px;
            }
            #graph-top-bar select {
                margin: 0;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
                background: #ffffff;
                background: url(                data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                background: -moz-linear-gradient(top, #ffffff 0%, #959595 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#959595));
                background: -webkit-linear-gradient(top, #ffffff 0%,#959595 100%);
                background: -o-linear-gradient(top, #ffffff 0%,#959595 100%);
                background: -ms-linear-gradient(top, #ffffff 0%,#959595 100%);
                background: linear-gradient(to bottom, #ffffff 0%,#959595 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#959595',GradientType=0 );
                border: 1px solid #000;
                font-size: 80%;
                padding: 6px;
                font-weight: bold;
            }

            #graph-top-bar .krylon {
            width: 48%;
            text-align: right;
            float: right;
            }


            select {
                width: 100%;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                -moz-box-shadow: inset 0 0 7px #8c8c8c;
                -webkit-box-shadow: inset 0 0 7px #8c8c8c;
                box-shadow: inset 0 0 7px #8c8c8c;
                border: 1px solid #b3b3b3;
                background: #fff;
                color: #3b3b3b;
                display: inline-block;
                height: 35px;
                text-indent: 15px;
                line-height: 29px;
            }


            .clearfix:after {
                 visibility: hidden;
                 display: block;
                 font-size: 0;
                 content: " ";
                 clear: both;
                 height: 0;
            }
            .clearfix { display: inline-block; }
            /* start commented backslash hack \*/
            * html .clearfix { height: 1%; }
            .clearfix { display: block; }
            /* close commented backslash hack */    

---

它按预期工作。你把它放在底部20像素的位置。只是因为父对象太小，它才会越过父对象的顶部。为家长设置一个更高的高度或在其中填充一些内容。无论你的声誉如何，你都不应该这样做。这并不能回答问题。要评论或要求作者澄清，请在他们的帖子下方留下评论-你可以随时在自己的帖子上发表评论，一旦你有足够的评论，你就可以了。嗯，好的。非常感谢。所以我别无选择，只能给它一个定义的最小高度？家长组？因为这是其中唯一的内容。是的，就是这样：但绝对定位在这种情况下似乎没有用。怎么会这样？如果最小化浏览器，可以看到它变得锯齿状。。因为其中一个的标题会落在两行上，而另一个则不会，所以框会变长且不均匀。请最小化浏览器。。你可以看到父级中的两个div变得参差不齐，这就是为什么我将它们对齐到最底部，这样它们就不会这样做。我总是尽量避免绝对。。。按照我的方式，你的容器id=图顶栏采用其内容的形状，并允许你在不必更改h&w的情况下更改内容。如果你担心锯齿边缘，有许多解决方案，如@media或bootstrap，甚至可以消除溢出。

#graph-top-bar {
    height: 170px;  /* your height */

#graph-top-bar {
    height: 10px;
}

#graph-top-bar {
                background: #474747;
                background: url(                data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                background: -moz-linear-gradient(top, #474747 0%, #000000 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#474747), color-stop(100%,#000000));
                background: -webkit-linear-gradient(top, #474747 0%,#000000 100%);
                background: -o-linear-gradient(top, #474747 0%,#000000 100%);
                background: -ms-linear-gradient(top, #474747 0%,#000000 100%);
                background: linear-gradient(to bottom, #474747 0%,#000000 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#000000',GradientType=0 );
                padding: 40px;
            }

            #graph-top-bar .brand {
                width: 48%;
                float: left;
            }

            .hidden-sm {
            }

            #graph-top-bar h1 {
                font-style: italic;
                font-size: 150%;
                word-wrap: break-word;
            }
            #graph-top-bar h4 {
                font-weight: normal;
                font-size: 80%;
                margin-top: -5px;
            }
            #graph-top-bar select {
                margin: 0;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
                background: #ffffff;
                background: url(                data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                background: -moz-linear-gradient(top, #ffffff 0%, #959595 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#959595));
                background: -webkit-linear-gradient(top, #ffffff 0%,#959595 100%);
                background: -o-linear-gradient(top, #ffffff 0%,#959595 100%);
                background: -ms-linear-gradient(top, #ffffff 0%,#959595 100%);
                background: linear-gradient(to bottom, #ffffff 0%,#959595 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#959595',GradientType=0 );
                border: 1px solid #000;
                font-size: 80%;
                padding: 6px;
                font-weight: bold;
            }

            #graph-top-bar .krylon {
            width: 48%;
            text-align: right;
            float: right;
            }


            select {
                width: 100%;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                -moz-box-shadow: inset 0 0 7px #8c8c8c;
                -webkit-box-shadow: inset 0 0 7px #8c8c8c;
                box-shadow: inset 0 0 7px #8c8c8c;
                border: 1px solid #b3b3b3;
                background: #fff;
                color: #3b3b3b;
                display: inline-block;
                height: 35px;
                text-indent: 15px;
                line-height: 29px;
            }


            .clearfix:after {
                 visibility: hidden;
                 display: block;
                 font-size: 0;
                 content: " ";
                 clear: both;
                 height: 0;
            }
            .clearfix { display: inline-block; }
            /* start commented backslash hack \*/
            * html .clearfix { height: 1%; }
            .clearfix { display: block; }
            /* close commented backslash hack */