html - 使用 CSS 将 2 个 div 固定到屏幕的左边缘

Question

谁能解释为什么我的紫色框与这个演示中的黄色框重叠？

我希望我的黄色框首先出现，然后我的紫色框出现在它下方 10 像素处。

演示: http://jsfiddle.net/t0x0y7ax/

#container {
    position: fixed; 
  top: 50%; 
  left:-55px;
}

#feedback1 {
    background:yellow;
    height: 50px; 
    width: 160px; 
    margin-bottom:10px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); 
  -moz-transform: rotate(-90deg); 
  -o-transform: rotate(-90deg); 
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#feedback2 {
    background:purple;
    height: 50px; 
    width: 160px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); 
  -moz-transform: rotate(-90deg); 
  -o-transform: rotate(-90deg); 
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

<div id="container">

<div id="feedback1">Feedback</div>

<div id="feedback2">Feedback</div>

</div>

Answer 1

就我个人而言，我只想改造容器……它让一切变得更容易

JSfiddle Demo

* {
    margin: 0;
    padding: 0;
}

#container {
    position: fixed;
    top:50%;
    left:0;
    border:1px solid red;
    transform-origin:top left;
    transform: rotate(-90deg) translate(-100%, 0%);
}

#feedback1 {
    background:yellow;
    height: 50px;
    width: 160px;
    float: right; /* to correct order when rotated */


}
#feedback2 {
    background:purple;
    height: 50px;
    width: 160px;
    float: right; /* to correct order when rotated */

}

<div id="container">
    <div id="feedback1">Feedback</div>
    <div id="feedback2">Feedback</div>
</div>