CODEWITHSUNDEEP
csshtml
magdazelena
magdazelena

Reputation: 71

absolutely positioned element move even in relative container

I googled and googled and checked stackoverflow and actualy I found the answer, it's logical and I understand it, but it's not working for me! The absolute positioned divs move when I resize the browser. I put them into a relative container and still they move. There's apparently something I am doing wrong, but I need help in finding what it is.

<div id="wrapper">
    <div id="logo">
        <img src="zgodalogotyp.png" width="240px">
    </div>
    <div id="line"></div>
    <div id="box"></div>
</div>

and css:

#wrapper {
    height: auto;
    margin-top: 0;
    margin-bottom: 50px;
    margin-left: 30px;
    margin-right: 30px;
    padding: 10px;
    background-color: white;
    position: relative;
    background-position: center;
    z-index: 0;
    clear: both;

}
#box {
    position: absolute;
    margin-top: 265px;
    right: -30px;

    width: 400px;
    height: 250px;
    background-color: #624051;
    z-index: 10;
    clear: both;
}
#line {
    margin-top: 254px;
    height: 56px;
    width: 455px;
    background-color: #000000;
    opacity: 0.2;
    z-index: 11;
    right: -30px;
    position: absolute;
}

there are many more divs in my code that I have this problem with, but I used the same schemes. thanks in advance

Upvotes: 0

Views: 933

Answers (1)

Pawel.W
Pawel.W

Reputation: 186

Don't know what you are trying to achive, but I'll try to guess ;) - everything moves becouse the relative positioned element has no width specified, and you are positioning those absolute elements to the right. Perhaps setting containers width solves your problem. Or simply positioning absolute elements to the left instead of right.

Upvotes: 1

Related Questions