直線勾配

Question

私は線形グラデーションの背景を持っているマージン/パディング0とdivの#todoで作業していないが、私は体から削除する場合にのみ動作します：

margin:0; 
padding:0; 

または私はのdiv #todoを削除するか、名前を変更した場合それ。

どうしたのですか？

body { 

margin:0; 
padding:0; 

background: 
    linear-gradient(
     limegreen, 
     transparent 
    ), 
    linear-gradient(
     90deg, 
     skyblue, 
     transparent 
    ), 
    linear-gradient(
     -90deg, 
     coral, 
     transparent 
    ); 

background-blend-mode: screen !important; 
} 

#todo{ 
position:absolute; 
top: 45%; 
left: 50%; 
-webkit-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%); 
text-align:center; 
} 

HTML

<div id="todo">linear gradient not working... only works if I remove margin and padding in body or remove this div #todo</div> 

https://jsfiddle.net/Lo2fzha4/

Answer 1

あなたは高さが設定されている必要があります。

は、あなたのCSSにこれを追加します。

あなた#todo divのは、位置に設定されているので、たまたま

html, body { 
    height: 100%; 
} 

Answer 2

：絶対。高さや幅を増やさずにあなたの体の上を「ホバリング」しているかのように想像することができます。

これまで述べたように、HTMLと本文に高さを付ける必要があります。