0

I have set a div named header as Absolute so that it is flush to the window.

I then have a content div tag with no position set both are contained in a wrapper div tag

I have set the content div tag to have padding of 100px from top so that contents are not obliterated by the header.

Is there any other way of moving the content under the absolutely positioned header with out the need to use padding or margins?

<div id="wrapper">
    <div id="header">
      <div id="indent">content of header</div>
    </div>

<div id="content">content of page</div>  

</div>

CSS

#wrapper {
background-color: #FFF;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 100px;
padding-left: 5px;
clear: both;}

#header {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
right: 0px;
background-color: #FFF;}

#indent {
width: 960px;
margin-right: auto;
margin-left: auto;
position: relative;}
#content {
clear: both;
padding-top: 100px;}
4

5 に答える 5

1

You could use the "top" attribute:

e.g.

.absolute {
    position: absolute;
    height:20px;
    width: 20px;
    background-color: #FF00FF;
}
.relative {
    position: relative;
    top:20px;
    height:20px;
    width: 20px;
    background-color: green;
}

See this fiddle

于 2013-11-14T11:42:01.230 に答える
0

一般的なルールとして、コンテナ内にフローティング コンテンツがある場合、CSS マスター ルールとコンテナのタイプ、ブロック、インライン ブロックに応じて、コンテナは最小の高さと幅に折りたたまれます。

この場合、フローティング コンテンツの直後の 1 つのコンテナーに常に clear プロパティを追加して、他のコンテンツを壊さないようにします。

<div id="wrapper">
    <div id="header">
      <div id="indent">content of header</div>
    </div>

    <div class="clear=box"></div>

    <div id="content">content of page</div>  
</div>

#wrapper { position:relative; }
#header {
  position:absolute;
  clear:both; /* add this to clear your content */
}
#content { clear:both; /* in case clear:both from above not working */ }
#clear-box { clear:both; /* a container dedicated to clear contentfloat */ }

場合によっては、専用の div を 1 つ追加して、前のコンテンツからのフローティングをクリアすることができます。絶対にポジショニングで予約してください。他に方法がなく、position:absolute を使用せざるを得ない場合を除き、デフォルトの要素の動作を使用してください。

あなたのために働くかどうか私に知らせてください:)

于 2013-11-14T13:37:38.513 に答える
0

私が理解していることから、relativeポジショニングではなくabsoluteポジショニングを使用したいと思うでしょう。質問を分かりやすくしていただければ、より良い回答ができるかもしれません。

于 2013-11-14T11:46:52.323 に答える