在某些情況下，CSS文本隱藏在DIV后面

Question

看看http://jsfiddle.net/hg25u/

我已經將右邊的HTML文本設為可編輯的，因此，如果在Result塊（右下）中單擊，則實際上可以通過鍵入來更改它。 現在，如果將輸入光標置於文本上方：

Bonorum has. His ut cibo quas tantas,

並按鍵盤上的Enter鍵，您會看到文本隱藏在它下方的灰色DIV標簽后面，它不應該這樣做，我發現它是CSS問題，但我無法使其正常工作。 它應該顯示在灰色DIV標簽下面，而不是像它那樣藏在它后面。 如果您四處亂逛，則在按Enter鍵時會看到它在很多情況下會執行此操作，有時它的行為正常，有時卻不行。

它不應在任何給定時刻將文本隱藏在這些灰色DIV條后面。 當您按Enter鍵時，應該繼續在灰色DIV標簽下方的文本行。

任何幫助，將不勝感激

另外，請查看此圖片以更好地了解它http://bayimg.com/eaIImAaef

Answer 1

行高必須與.gate大小相同，而.fencepost高度必須為每個塊中要包含的許多行文本乘以行高。

body{ 
  font-size: 12px; 
  line-height: 20px; /* set base line-height */
}

.fencepost {
  float: left; 
  width: 1px; 
  height: 100px; /* 20px (line-height) multiplied by 5 lines of text */
}

.gate {
  float: left; 
  clear: left; 
  width: 100%; 
  height: 20px; /* same as line-height */
  background-color: #eee; 
  opacity: 0.9;
}

.newsletterContent {
  width:600px;
}

參見： http : //jsfiddle.net/cg6yC/

Answer 2

查看是否可以使用z-index屬性將div強制置於文本后面。