我的位置有问题：绝对答案

【问题标题】：I'm doing something wrong with position:absolute我的位置有问题：绝对
【发布时间】：2016-05-29 10:55:48
【问题描述】：

我正在尝试为 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/

有人可以帮我吗？

【问题讨论】：

css deos 没有“=”而是“:” 所以 top:40px
property:value 不是property=value
欢迎来到 Stack Overflow！绝对定位是一种非常糟糕的网页布局方法。它非常不灵活，并且有更好和响应速度更快的选项。查看LearnLayout.com

标签： css position absolute

【解决方案1】：

内联样式和普通的 CSS 一样，你不能在 CSS 中使用= 设置属性。

【讨论】：

【解决方案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>

【讨论】：