position:absolute 我做错了什么

Question

我正在尝试将绝对位置设置为 20 div 左右，但它们都显示在其他位置之上！

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;
}

这是 jsfiddle：https://jsfiddle.net/wp3peqdp/

有人可以帮助我吗？

Answer 1

内联样式与普通样式一样 CSS，您无需在 CSS 中使用 = 设置属性。

Answer 2

你用的是等号而不是冒号。为您解决了这个问题：

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;
}

<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>

position:absolute 我做错了什么

I'm doing something wrong with position:absolute

css

position

absolute