私は3つのdivを持っています：私のページの上部にバナー（Facebook、Twitter、またはStackoverflowを考えてください）、そのバナーの検索バー、そしてその下のページの主な内容を持つ本文。CSSの配置状況
私は検索バーの山車すなわちマージンなしで直接下記の体内でのバナーの上に検索バーを配置したいと体がそうのような、ない：
+-----------------------------+
| +-----------+ | <-- banner with search bar within
| +-----------+ |
+--+-----------------------+--+
| | <-- main body of page
| |
| |
| |
| |
| |
+-----------------------+
<!DOCTYPE html>
<html>
<head>
<title>SO</title>
<style type="text/css">
div#banner {
background: #aabbcc;
}
div#search, div#main {
margin-left: auto;
margin-right: auto;
border: 1px solid gray;
}
div#search {
width: 20%;
}
div#main {
width: 80%;
}
</style>
</head>
<body>
<div id="banner">
<div id="search">
Search
</div>
</div>
<div id="main">
Main
</div>
</body>
</html>
<html>
<style type="text/css">
#banner {
height:100px;
position:relative;
}
#search-bar-container {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
#search-bar{
height:50px;
margin:10px auto; /*center the search bar*/
width:200px;
}
#page-body {
width:900px;
margin:0 auto;
min-height:500px;
}
</style>
<body>
<div id="banner">
<div id="search-bar-container">
<div id="search-bar">
<input type="search" name="txt_search" />
</div>
</div>
</div>
</body>
</html>
jsfiddle.netでコードを表示する –