1

解決策を見つけるのを手伝ってもらえますか?

私はサイト構築の初心者なので、ポジショニングに問題があります。

ここが私のサイトになります

そして、ここにCSSがあります。

#navigation {
position: fixed;
top: 10px;
left: 5%;
right: 5%;
width: 90%;
color: #4b5dd2;
height: 40px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);

}
#navigation a {
font-size: 20px;
font-family: sans-serif;
padding-left: 20px;
padding-right: 20px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: grey;
} 

/*####################################################################################################*/

#page1{
position: inherit ;
top: 70px;
left: 5%;
right: 5%;
width: 90%;
height: 1000px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;    
}

/*####################################################################################################*/

#page2{
position: inherit;
top: 1070px;
left: 5%;
right: 5%;
width: 90%;
height: 1000px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;    
}

正しい属性設定について教えてください。

ナビゲーションバーが常に一番上にあり、サイト自体がナビゲーションバーの上にスクロールしていることを達成しようとしています。言い換えれば、ナビゲーションが画面の 5% を占めている場合、情報を含むページは他の 95% のみに表示したいと考えています。

ページがナビゲーションの背後にあるようです

手伝ってくれてありがとう。

4

1 に答える 1

2

オーバーラップする場合に階層を設定できるようにするには、z-index を使用する必要があります。トップバーの z-index をz-index: 10;体のようなものに設定しますz-index:2;(これらの # は非常に恣意的なものであり、すべてのデフォルトが 1 であることに注意してください)。

また、z-index は普遍的ではないことに注意してください。それ自体は、それ自体が下/上にある要素とのみ比較されます。すなわち:

<div id="a">
    <div id="b">
        <div id="c">
                content
        </div>
    </div>
</div>
<div id="d">
    content
</div>

c に z-index を指定すると、d の z-index 情報と相互作用しません。これらは「関連」していないためです。AND、C の z-index を a および b の z-index に関連付ける場合は、a および b に対してそれらを定義する必要があります。

これが例です

HTML

<head>
 <!-- FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>

    <!-- CSS -->
    <link href="/styles/main_styles.css" rel="stylesheet" type="text/css" media="all" />

    <!-- JavaScript -->
    <script src="/js/jquery/jquery-1.8.0.js"></script>
</head>

<body>
   <div id="container">
       <div id="top_bar">menu item 1 2 3 4 5</div>
       <div id="centering_tool">
           <div id="body">
               <div class="body_content">paragraph 1</div>
               <div class="body_content">paragraph 2</div>
               <div class="body_content">paragraph 3</div>
           </div>
       </div>
   </div>
</body>

CSS

#container { widthL100%;}

#top_bar {
    width:500px;
    height:50px;
    background:#000;
    position:fixed;
    z-index:5;
} 

#centering_tool { margin: 0 auto;}

#body {
    width:800px;
    height:1000px;
    z-index:3;
}

.body_content {
    width:100%;
    height:200px;
    background:pink;
    margin-bottom:20px;
}

アイデアを得るためにこれを試してください

于 2013-11-08T23:18:32.140 に答える