0

だから私はレスポンシブhtmlをいじり始めました。とにかく、それは本当に問題ではありません。問題は、この平行四辺形の形状を追加した後、ラッパーの内容が台無しになったことです。z-index を使用してナビゲーション バーがラッパーの上に表示されるようにしようとしましたが、ラッパーを相対に設定すると機能しませんでした。絶対/固定および z-index -1 に設定すると機能しました。ナビゲーションバーに平行四辺形の形状を持たせながら、ラッパーを中央に配置しようとしています。現在、私の 2 列のレイアウトは形状のせいでごちゃごちゃになっています。

http://jsfiddle.net/RgKaQ/

ここに私が試したことがあります

nav {
    height: 40px;
    width: 100%;
    background: #33FF00;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #339900;
    z-index : 1;

}
.wrapper {
    width: 800px;
    margin: 0 auto;
       /* position: relative; doesn't work*/
        position: fixed; /*works but it makes it not aligned in the center*/
    z-index: -1;
}
4

2 に答える 2

0

ナビゲーション バーの CSS を変更する場合は、この絶対位置を使用してみてください。ラッパーではなく、ナビゲーション バーの CSS で変更を行います。

.wrapper {
width: 800px;
margin: 0 auto;
   /* position: relative; doesn't work*/
   /* position: fixed; works but it makes it not aligned in the center*/
     position:absolute;
z-index: -1;

}

于 2013-03-16T08:33:39.063 に答える
0

ID #swank (ナビゲーションよりも背が高い) が問題を引き起こしています。使用位置:絶対; nav の場合、.wrapper にマージンを追加します。このような。http://jsfiddle.net/RgKaQ/4/

nav {
position:absolute;
top: 0;
}
.wrapper {
margin: 40px auto 0 auto;
overflow:auto;
}
于 2013-03-16T08:54:13.090 に答える