html - 绝对定位元素的相对定位

Question

我正在试验单页设计，并通过创建一列 <div> 来从多个不同的页面构建一个页面。每个元素都在窗口高度的 100% 处，并且绝对一个位于另一个之下。

因此，每个页面都需要绝对设置它的元素，因为(据我所知)没有正常的文档流可遵循。但是，当涉及到文本时，我发现很难设计。我想尝试并保持当前的设计，而不是重新开始。

在特定页面上，我有一个文本容器。在那个容器中，有两个标题。第一个标题是两个小段落，第二个标题是一个:

HTML

<div id="introTextContainer">
    <div id="introTextHeader" class="blurbheader">First title</div>
    <div id="introText" class="blurb">
            Generic text about the roots of the company
    </div>
    <div id="introTextParg2" class="blurb">
            further information about the roots
    </div>
    <div id="introStatement1" class="blurb StrongStatement">
            Second title
    </div>
    <div id="introTextParg3" class="blurb">
            Eye-catching mission statement
    </div>
</div>

CSS

.blurb {
    font-family: Lato;
    font-size: 16px;
    padding-right:10px;
    font-size: 1.4vh
}

.blurbheader {
    font-family: Lato;
    font-size: 2vh;
    padding-right:10px;
}

.StrongStatement {
    font-family: Lato;
    font-size: 20px;
}

#introTextContainer {
    height: 20%;
    width: 45%;
    background: rgba(255,255,255,0.8);
    position: absolute;
    left: 200px;
    top: 10%;
    border-radius: 5px;

}

#introTextHeader {
    position: absolute;
    width: 280px;
    left: 30px;    
    top: 5px;
    height: 10%;
}

#introText {
    position:absolute;
    left: 10px;
    font-family: Lato;
}

#introTextParg2 {
    position:absolute;
    left: 10px;
}

#introStatement1 {
    position:absolute;
    left: 30px;
}

#introTextParg3 {
    position:absolute;
    left: 10px;
}

在 1080p 的标准分辨率下，所有这些看起来都完全可以接受。但是，当分辨率更改时，设计不会响应相同的内容。正如您在 CSS 中看到的那样，我一直在试验文本的视口(viewport)高度，但是 <div> 的间距和高度元素是另一回事。

如何在文本容器范围内创建定位/大小上下文，以便我可以在这些容器范围内设置其中文本段落的高度和填充？当前的方法使用 javascript，但我不喜欢尝试使用 javascript 来针对每个可能的屏幕尺寸的想法，因为这会导致大量的意大利面条代码。理想情况下，我只想使用 javascript 来设置“页面”的高度 <div>元素和包含框。

编辑:页面设计的CSS、JS、HTML

第一页的宽度和高度为 100%。随后的页面使用 JQuery 进行了更改。值data-section-name用于无缝滚动插件。 Canvas 仅用于放置背景图像:

HTML

<section id="pageOne" class="panel pageone" data-section-name="sectionpageOne"> <!-- About -->
    <canvas id="pageOneCanvas"></canvas>

        <div id="introTextContainer">
        <div id="introTextHeader" class="blurbheader">First title</div>
        <div id="introText" class="blurb">
            Generic text about the roots of the company
        </div>
        <div id="introTextParg2" class="blurb">
            further information about the roots
        </div>
        <div id="introStatement1" class="blurb StrongStatement">
            Second title
        </div>
        <div id="introTextParg3" class="blurb">
            Eye-catching mission statement
        </div>
    </div>
</div>

</section>   

CSS

#pageOne {
    position: absolute;
    /*top: 0;*/
    left: 0;
    width: 100%;
}

#pageOneCanvas {
    height: 100%;
    width: 100%;
    z-index: 1;
    background-image: url("/Resources/images/aboutcanvas.jpg");
    background-size: cover;
    opacity: 0.6
}

JS

// Canvas height and positioning
var posheight = $(window).height();

$("#home").height(posheight);
$("#pageOne").height(posheight);
$("#pageTwo").height(posheight);
$("#pageThree").height(posheight);
$("#pageFour").height(posheight);
$("#pageFive").height(posheight);

$("#pageOne").css("top", posheight);
$("#pageTwo").css("top", (posheight * 2));
$("#pageThree").css("top", (posheight * 3));
$("#pageFour").css("top", (posheight * 4));
$("#pageFive").css("top", (posheight * 5));

此外，目前固定文本容器尺寸的解决方案也是在JS中。你可以开始明白为什么我想在 CSS 中实现这一点，因为它在这里变得困惑:

var introTextTitleHeight = $("#introTextHeader").height();


$("#introText").css("top", (introTextTitleHeight + 10));
$("#introTextParg2").css("top", ($("#introText").position().top + $("#introText").height() + 10));
$("#introStatement1").css("top", ($("#introTextParg2").position().top + $("#introTextParg2").height() + 10));
$("#introTextParg3").css("top", ($("#introStatement1").position().top + $("#introStatement1").height() + 10));

Answer 1

在子 div 上删除 position: absolute; 不会做你想做的事吗？
并使用 margin-left 而不是 left。

所以规则看起来像这样:

#introTextHeader {
    margin-left: 30px;    
    margin-top: 5px;
    height: 10%;
}

#introText {
    margin-left: 10px;
    font-family: Lato;
}

#introTextParg2 {
    margin-left: 10px;
}

#introStatement1 {
    margin-left: 30px;
}

#introTextParg3 {
    margin-left: 10px;
}