Search code examples
csspositionabsolute

I'm doing something wrong with position:absolute

I am trying to set absolute position for 20 div or so but they are all showing the ones above the others !

HTML :

    <body>

<div class="box" style="width : 2000px; height : 2000px">

<div style="position:absolute; top=705px; left=200px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=325px; left=560px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=1085px; left=560px; width=300px; height=150px;" class="femme">coucou</div>
<div style="position:absolute; top=135px; left=920px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=515px; left=920px; width=300px; height=150px;" class="femme">coucou</div>
<div style="position:absolute; top=895px; left=920px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=1275px; left=920px; width=300px; height=150px;" class="femme">coucou</div>
<div style="position:absolute; top=40px; left=1280px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=230px; left=1280px; width=300px; height=150px;" class="femme">coucou</div>
<div style="position:absolute; top=420px; left=1280px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=610px; left=1280px; width=300px; height=150px;" class="femme">coucou</div>
<div style="position:absolute; top=800px; left=1280px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=990px; left=1280px; width=300px; height=150px;" class="femme">coucou</div>
<div style="position:absolute; top=1180px; left=1280px; width=300px; height=150px;" class="homme">coucou</div>
<div style="position:absolute; top=1370px; left=1280px; width=300px; height=150px;" class="femme">coucou</div>
</div>

</body>

CSS :

body {
    -webkit-font-smoothing: antialiased;
    font-family: 'Source Sans Pro', sans-serif;
    background: #F0F0F0;
}

.box {
    position: relative;
}

.homme {
    background: #E0E4EE;
    border-radius: 0px 10px 0px 10px;
}

.femme {
    background: #EBDCE2;
    border-radius: 0px 10px 0px 10px;
}

Here is the jsfiddle : https://jsfiddle.net/wp3peqdp/

Can someone help me ?

Solution

  • Inline styles are just like normal CSS, and you don't set properties with = in CSS.