Question

我试图让div元素隐藏它的文本的开头而不是结尾。如果这没有意义，请看小提琴 - http://jsfiddle.net/L7zd8uyb/1/

当您缩小屏幕宽度时，“段落”将隐藏在最右边的div后面。是否有可能达到这个div然后开始隐藏最左边的div后面的“一些”？

HTML：

<div id="leftside">Left</div>
<div id="rightside">Right</div>

<div>
    <span>Some paragraph.</span>
</div>

CSS：

#leftside {
  position: absolute;
  left: 0;
  width: 200px;
  background-color: red;
}

#rightside{
  position: absolute;
  right: 0;
  width: 150px;
  background-color: red;
}
span {
  margin-left: 200px;
}

注意：JSFiddle从此问题中提供的示例中简化 - How can I prevent HTML elements from overlapping or sliding under one another?

Answer 1

您的margin-left: 200px阻止它与您的#leftside div重叠。

尝试使用CSS：

#leftside {
  position: absolute;
  left: 0;
  width: 200px;
  background-color: red;
  z-index: 2; /* this will overlap #rightside */
}


#rightside{
  position: absolute;
  right: 0;
  width: 150px;
  background-color: green;
  z-index: 1; /* this will overlap span */
}
span {
  position: fixed;
  left: 40%; /* change this to what you need, depending on #leftside */
}

Answer 2

添加以下样式：

NuGetRestore

Fiddle

当它重叠时，如何隐藏元素的开头而不是结尾？

2 个答案: