Question

我正在尝试创建一个页面，其中标题位于窗口的70％和窗口的85％的主体中心。标题在身体的顶部，但我似乎无法实现这一点。当我向我的#body div添加相对定位时; div似乎相对于页面的窗口（主体）而不是标题定位。如何使#body div位于#header div的相对位置，以便身体进入页面流？（我希望#header中的所有元素都保持在我定位它们的位置。）

HTML / PHP

<?php
        $resultSet = $db->query("SELECT * FROM table");

        if ($resultSet->num_rows != 0)
        {
             while ($rows = $resultSet->fetch_assoc())
            {
                $id = $rows["id"];
                $images = $rows["image"];
                $title = $rows["title"];

                if ($id <= 3)
                {


                    //Front page Div that contains all the header elements
                    echo "<div id=header>";
                    if ($id == 1)
                    {
                        //The front page div that contains the large image and the title
                        echo "<div id=largeDiv>";
                        echo "<img src=$images>";

                            //Div inside of largeImg div, that creates semi-transparent block for title
                            echo "<div id=largeTitle>";

                            //Main title of header
                            echo "<h2>$title</h2>";
                            echo "</div>";  //End of largeTitle div

                        echo "</div>";  //End of largeDiv

                    }

                    //Secondary div inside of #header that goes on the right side of #largeDiv
                    echo "<div id=smallDiv>";

                    if ($id == 2)
                    {
                        //Left image
                        echo "<img id=leftImg src=$images>";
                    }

                    if ($id == 3)
                    {
                        $text = $rows["text"];

                        //Right image
                        echo "<img id=rightImg src=$images>";

                        //Secondary div's title
                        echo "<h2>$title</h2>";

                        //Secondary div's text
                        echo "<p>$text</p>";
                    }

                        echo "</div>"; //End of smallDiv
                    echo "</div>"; //End of header
                }

                else
                {
                    echo "<div id=body>";

                    if ($id <= 13)
                    {
                        echo "<div id=left>";
                        echo "<img src=$images>";
                        echo "</div>";
                    }
                    echo "</div>";

                }


            }
        }

    ?>

CSS

 /*BODY OF ENTIRE PAGE*/
body{
    position: relative;
}

/*HEADER OF PAGE. CONTAINS ALL HEADER ELEMENTS*/
#header{
    position: relative;
    width: 70%;
    height: auto;
    margin: 1.5% auto;
}

/*MAIN DIV OF HEADER*/
#largeDiv{
    position: absolute;
    width: 65%;
}

/*IMAGE OF THE MAIN DIV OF HEADER*/
#largeDiv img{
    width: 100%;
}

/*THE DIV INSIDE OF #LARGEDIV THAT IS A SEMI-TRANSPARENT BLOCK*/
#largeTitle{
    position: absolute;
    width: 100%;
    height: 25%;
    bottom: 1.5%;
    background-color: rgba(0, 0, 100, 0.4);
}

/*THE H2 TAG FOR THE MAIN TITLE OF THE HEADER, THIS IS INSIDE #LARGETITLE*/
#largeTitle h2{
    color: white;
    text-align: center;
    font-family: sans-serif;
    font-size: 22px;
}

/*SECONDARY DIV OF HEADER, NEXT TO THE #LARGEDIV*/
#smallDiv{
    position: absolute;
    right: 0%;
    top: 0%;
    width: 32%;
    height: auto;
}

/*LEFT SMALL IMAGE OF HEADER*/
#leftImg{
    width: 45%;
    float: left;
}

/*RIGHT SMALL IMAGE OF HEADER*/
#rightImg {
    width: 45%;
    float: right;
}

/*THE TITLE OF THE SECONDARY DIV OF HEADER*/
#smallDiv h2{
    clear: both;
    font-size: 24px;
    margin-top: 48%;
    color: cornflowerblue;
    font-family: sans-serif;
}

/*THE TEXT OF THE SECONDARY DIV OF HEADER*/
#smallDiv p{
    font-size: 100%;
    font-family: sans-serif;
    margin-top: -5%;
}

#body{

    position: relative;
    width: 85%;
}

#left{
    width: 28.33%;
}

#left img{  
    display: block;
    width: 100%;
}

示例数据集：

<div id=header><div id=largeDiv><img `src=http://i2.cdn.turner.com/cnnnext/dam/assets/150429103538-bernie-sanders-gallery-photo-5-super-169.jpg><div id=largeTitle><h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Val hala mo sema serum.</h2></div></div><div id=smallDiv></div></div><div id=header><div id=smallDiv><img id=leftImg src=http://a4.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE4MDAzNDEwMDU4NTc3NDIy.jpg></div></div><div id=header><div id=smallDiv><img id=rightImg` src=https://pbs.twimg.com/profile_images/602821590582038528/oobPhTxZ_400x400.png><h2>Prima disputando per ne, mea amet</h2><p>Ut usu soleat torquatos, vix iudico singulis constituto ut. In vim consul assueverit, ius no veniam voluptatum. Veritus vivendum</p></div></div><div id=body><div id=left><img src=http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg></div></div><div id=body><div id=left><img src=http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg></div></div><div id=body><div id=left><img src=http://newflowerwallpaper.com/download/flower-images-to-color-and-wallpapers/flower-images-to-color-and-wallpapers-16.jpg></div></div><div id=body><div id=left><img src=http://eskipaper.com/images/images-4.jpg></div></div>

Answer 1

body是一个页面构造，无法重新定位，因此位置样式没有实际效果。

如果您的标题内容#header位于另一个元素（例如HTML5样式header内，并且#body容器内可能main内，那会更好。

所以，例如;

<body>
  <header>
    <div id="header">
       Header Content Here
    </div>
  </header>
  <main>
    <div id="body">
       <div id="left">
          Left Content
       </div>
    </div>
  </main>
</body>

CSS

header {
   width: 100%;
}

#header{
   position: relative;
   width: 70%;
   height: auto;
   margin: 1.5% auto;
}

main {
   width: 100%;
}

#body {
   position: relative;
   width: 85%;
   margin: 0 auto;
}

#left {
   width: 28.33%;
}

以上是一个不完整的解决方案，但它是您如何构建页面的示例。

altnernative是在所有内容周围都有一个容器（如#container），内容的最大宽度。

如何使用相对定位获取头部下方的身体？

1 个答案: