Html 这是覆盖div元素的正确方法吗？_Html_Css

Html 这是覆盖div元素的正确方法吗？

html css

Html 这是覆盖div元素的正确方法吗？,html,css,Html,Css,我试图将注释div元素覆盖在主div元素上，但我不确定以下内容：这是正确的吗有没有更好的方法来实现它代码示例可在以下位置找到：代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lan

我试图将注释

div

元素覆盖在主

div

元素上，但我不确定以下内容：

这是正确的吗

有没有更好的方法来实现它

代码示例可在以下位置找到：

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type=" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="copyright" content="&copy; 2012" />

    <title>sample layout</title>

    <base href="" />

    <link rel="stylesheet" type="text/css"  media="all" href="" />

    <style type="text/css" media="all">

        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: #eeeeee;
            font-family: Arial, Verdana, sans-serif;
            color: #ffffff;
        }

        #content {
            width: 700px;
            margin-top: 10px;
            margin-right: auto;
            margin-bottom: 10px;
            margin-left: auto;
            border-width: 1px;
            border-color: #ffffff;
            border-style: solid;
            overflow: auto;
            padding-top: 40px;
            padding-bottom: 40px;
        }

        #header {
            font-size: 1em;
            color: #FFC700;
            margin-left: 100px;
            margin-bottom: 20px;
        }

        .main {
            float: left;
            width: 300px;
            height: 300px;
            background-color: #00ACED;
            margin-left: 100px;
            padding: 20px;
            position: relative;
        }

        .comments {
            width: 320px;
            background-color: black;
            position: absolute;
            top: 305px;
            left: 0px;
            padding: 10px;
        }

        .shoutbox {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-left: 50px;
            margin-bottom: 20px;
        }

        .border {
            border-width: 15px;
            border-color: #ffffff;
            border-style: solid;    
        }


    </style>

    <script type="text/javascript">


    </script>
</head>

<body>
    <div id="container">
        <div id="content">
            <div id="header"><h1>Title</h1></div>
            <div class="main border">
                Hi {Name}, <br /> Your details are.
                <div class="comments">comments</div>
            </div>
            <div class="shoutbox border">shoutbox1</div>
            <div class="shoutbox border">shoutbox2</div>
        </div>
    </div>

</body>
</html>


样本布局
* {
边际：0px；
填充：0px；
}
身体{
背景色：#eeeeee；
字体系列：Arial，Verdana，无衬线；
颜色：#ffffff；
}
#内容{
宽度：700px；
边缘顶部：10px；
右边距：自动；
边缘底部：10px；
左边距：自动；
边框宽度：1px；
边框颜色：#ffffff；
边框样式：实心；
溢出：自动；
填充顶部：40px；
填充底部：40px；
}
#标题{
字号：1em；
颜色：#FFC700；
左边距：100px；
边缘底部：20px；
}
梅因先生{
浮动：左；
宽度：300px；
高度：300px；
背景色：#00ACED；
左边距：100px；
填充：20px；
位置：相对位置；
}
.评论{
宽度：320px；
背景色：黑色；
位置：绝对位置；
顶部：305px；
左：0px；
填充：10px；
}
.shoutbox{
浮动：左；
宽度：100px；
高度：100px；
背景颜色：橙色；
左边距：50像素；
边缘底部：20px；
}
.边界{
边框宽度：15px；
边框颜色：#ffffff；
边框样式：实心；
}
标题
您好{Name}，
您的详细信息如下。
评论
shoutbox1
shoutbox2

正如我在上面的评论中所说，我认为您的解决方案完全可以。您的comments div嵌套在main中，并且绝对位于main中。我看这里没有黑客

但这并不是实现这一目标的唯一方法，我将向您展示另一种更灵活的方法。也就是说，它使您的主框和注释框允许可变高度的内容（而在当前解决方案中，文本将溢出其容器）

它基于两件事：

另一个div使用class

main contents

包装内容。它是

.main

在

.main

、

.main contents

和

.comments

上使用

min height

，以保证原始尺寸，但如果需要，可向下展开 HTML

<div class="main border">
    <div class="main-contents">
        Hi {Name}, <br /> Your details are.
    </div>
    <div class="comments">comments</div>
</div>

为了证明这一点，我设置了一个显示原始内容和另一个在其下方有较高内容的块。

快速建议：使用

底部：0而不是顶部：305px。然后，如果以后要更改外部div的高度，则不必重新定位注释框。哦，也许可以在Hi{Name}周围添加P标记。。Etc.bit？@PeanutsMonkey，在本例中，您还可以在或上提供一个实时的工作代码。（抱歉，如果我在这里太挑剔了，我只是想澄清一下Stack Overflow的最佳实践）。是的，这完全可以。您的comments div嵌套在main中，绝对位于main中。这里没有黑客。但许多（大多数？）CSS定位技巧看起来确实像黑客。有时候他们看起来很丑陋，但这是唯一能达到某种效果的方法。我不认为自己是个大师，但我经常使用那种定位策略。我还尽量避免浮动，因为浮动很容易失控。如果可能，我使用具有绝对或相对定位的替代解决方案，或display:inline block。
.main {
    width: 340px;
    min-height: 340px;
    background-color: #00ACED;
    margin-left: 100px;
}

.main-contents {
    padding: 20px;
    min-height: 262px;
}

.comments {
    background-color: black;
    padding: 10px;
    min-height: 18px;
}

.border {
    border-width: 15px;
    border-color: #ffffff;
    border-style: solid;    
}