Question

我尝试添加z-index，试验不同的div名称，但我没有运气。

我尝试检查元素，但几乎就像侧边栏位于整个网站之上且位于父级之外...

非常感谢任何输入。

Answer 1

几点指示

我添加到.sidebar

  top:100%;
  left:0;

我拿出

translate(1em,0) /*This was causing bar to shift instead of bracing to window*/

这是一个工作片段

html, body {
  margin: 0;
  height:100vh;
  height:100vw;
  font-size: 16px;
}

.main {
  background-color: blue;
  height:100vh;
  width:100vw;
}

.rest {
  background-color: blue;
  height:100vh;
  width:100vw;
}

.sidebar {
  z-index: 1000;
  display: block;
  position: fixed;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  white-space: nowrap;
  -webkit-transform: rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  transform:rotate(-90deg);
  -ms-transform: rotate(-90deg);
  top:100%;
  left:0;
 padding:0px;
  width:100vh;
 margin:none;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -ms-transform: none;
  -ms-transform-origin: none;
  -ms-writing-mode: tb-rl;
  *writing-mode: tb-rl;
  border-right: 1px solid black;
  border-right: 1px solid rgba(0,0,0,0.5);
  background-color: white;
  background-color: rgba(255,255,255,.4);
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}

<html>
<body>
<div class="main">
<div class="sidebar">
testestestste 
</div>
</div>

<div class="rest" style="background-color: yellow;">
</div>
</body>
</html>

文字在ie中消失

1 个答案: