1. ホーム
  2. 質問と答え
  3. 内箱を上に移動して外箱をCSSで固定する方法は？

内箱を上に移動して外箱をCSSで固定する方法は？

2012-02-23 4 views
0

私は、次のコードを持っている：私はそれは黄色のボックスと青のボックスの両方に重なるように約30ピクセルを上に移動する赤いボックスが欲しい内箱を上に移動して外箱をCSSで固定する方法は？

<html> 
<head> 
<style> 
#yellow {height:100px; background:yellow;} 
#blue {background:blue;} 
#red {background:red; width: 400px; height: 100px; margin:0px auto;} 
</style> 
</head> 
<body> 
     <div id="yellow"></div> 
     <div id="blue"> 
       <div id="red">Lots of content goes in here that will expand the outer blue box as well</div> 
     </div> 
</body> 
</html>

を。私が#red {margin:-30px auto 0px auto;}をしようとすると、青色のボックスが赤いボックスで30ピクセル上に移動しました。

どのように私は、赤いボックスを上に移動し、黄色と青の両方に重なりますか？

出典

2012-02-23 John

答えて

1

ここに行きます。

#yellow { 
    height:100px; 
    background:yellow; 
} 
#blue { 
    background:blue; 
} 
#red { 
    background:red; 
    width: 100px; 
    height: 100px; 
    margin:0px auto; 
    position:relative; 
    top:-30px; 
}

出典

2012-02-23 21:22:28

+0

#blueの下にスペースを入れたくない場合は、margin-bottom：-30pxを#redに追加します。 –

1

あなたはposition: relativeを使用して試みることができる：

#red { 
    position: relative; 
    top: -30px; 
    /* other CSS */ 
}

出典

2012-02-23 21:22:30

1

、青いボックスは赤いボックスを包含する。赤いボックスを相対的に配置する必要があります。

したがって、次のCSSコードを#red idに追加するだけで済みます。

​​

これは期待どおりの結果であるコードです。

<html> 
<head> 
<style> 
#yellow {height:100px; background:yellow;} 
#blue {background:blue;} 
#red {background:red; width: 400px; height: 100px; margin:0px auto; position: relative; top: -30px;} 
</style> 
</head> 
<body> 
     <div id="yellow"></div> 
     <div id="blue"> 
       <div id="red">Lots of content goes in here that will expand the outer blue box as well</div> 
     </div> 
</body> 
</html>

出典

2012-02-23 21:45:37

関連する問題

 関連する問題