Блог

Главная - Вопросы по программированию - Почему мне нужно установить поле div в отрицательное значение, когда его братья и сестры принимают положительное значение, чтобы позиционировать себя на вершине?

Почему мне нужно установить поле div в отрицательное значение, когда его братья и сестры принимают положительное значение, чтобы позиционировать себя на вершине?

#html #css

#HTML #css — файл

Вопрос:

Я установил для поля div #hdesign значение margin: 0px 250px, чтобы поместить его в начало..Чтобы установить div#hTestimonial в начало, оно принимает отрицательные значения, такие как margin:-200px 300px; Почему это так, когда оба являются братьями и сестрами одного и того же родителя?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slicing</title>

<style type="text/css">
html,body{  
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;

    }
div#wrapper{    
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
        line-height:normal;
        border:#000 thin dotted;
        background-color:#FF3;
        font-size:10px;

    }

div#wrapper div#header{
        width:100%;
        height:30%;
        border:#000 thin dotted;

    }


div#wrapper div#body{
        width:100%;
        height:50%;
        border:#000 thin dotted;
        background-color:#096;
    }

div#wrapper div#footer{
        width:100%;
        height:20.0%;
        border:#000 thin dotted;

    }



div#wrapper div#header div#hlogo{
        width:25%;
        height:95%;

        margin:0px ;

        background-color:#096;


    }

div#wrapper div#header div#hdesign{
        width:180px;
        height:90px;
        border:#000 thin dotted;
        position:absolute;
        top:0px;
        left:115px;
        margin:0px 250px;
        background-color:#3C9;
        opacity:0.5;
        line-height:0px;
    }

div#wrapper div#header div#hTestimonial{
        //width:40%;
        margin:0px 300px;
        width:150px;
        height:100%;
        border:#000 thin dotted;


    }

div#wrapper div#header div#hlogo div#Logoheader{
        font-size:16px;
        font-weight:bold;
        background-color:#F6F;
        text-align:center;
        height:30px;
        width:70%;
        margin:0px 0px 0px 51px;
        overflow:hidden;
        border:#000 thin dotted;



    }

div#wrapper div#header div#hlogo div#Logodesc{
        font-size:10px;
        height:30px;
        background-color:#F90;
        width:70%;
        margin:0px 0px 5px 51px;
        overflow:hidden;
        line-height:0.5;
        text-align:center;
        border:#000 thin dotted;
    }


div#wrapper div#header div#hdesign div{


        padding:60px 65px 0px 0px;

    }

div#wrapper div#header div#hdesign div p{
        color:#000;
        font-weight:bold;
    }

div#wrapper div#header div#hTestimonial{
        ;
    }
</style>
</head>

<body>
<div id="wrapper">
    <div id="header">
        <div id="hlogo">


                    <div id="Logoheader">RamblingSoul</div>
                    <div id="Logodesc">
                        <p>A Free CSS Template From</p>
                        <p>RamblingSoul</p>
                    </div>


        </div>
        <div id="hdesign">
                <div><p>Great Design </p><p>Guaranteed</p></div>

        </div>
        <div id="hTestimonial">
                <div > <h3>Client Testimonial</h3>
                        <p>ahkshdskka jkljsald</p>
                        <p>ahkshdskka jkljsald</p>
                        <p>ahkshdskka jkljsald</p>
                        <p>ahkshdskka<a href=""> Read More</a></p>
                </div>
        </div>
    </div>
    <div id="body">
    </div>
    <div id="footer">
    </div>
</div>
</body>
</html>

Комментарии:

1. ваш код неполон, что является родительским? какой предыдущий брат перед #hdesign?

2. Исправлен стиль, так что это понятно… подождите, пока это будет одобрено.

3. @Niklas: jsbin.com/ayuxi5

4. Причина, по которой hdesign находится вверху, даже с 0 верхним полем, заключается в том, что оно было установлено с position:absolute значением top:0 . Если вы сделаете то же самое с hTestimonial div, вы должны получить аналогичные результаты.

Ответ №1:

Элемент #hdesign выравнивается по верху из-за {position: absolute; top: 0;} . На самом деле это не нужно margin-top: 0 (приведено сокращенно).

Элемент #hTestimonial , с другой стороны, является статически расположенным элементом, и поэтому в обычном процессе рендеринга. Таким образом, любой контент, отображаемый перед ним (который не позиционируется fixed или absolute ), влияет на его позиционирование.

Этот учебник должен дополнительно прояснить различия в позиционировании.