0

私は本当にcssに慣れていません。これについて本当に助けが必要です。問題を表示するフィドルをセットアップしました。

http://jsfiddle.net/naini/mBMq3/6/

.contentBack{   
    width : 300px;
    border : solid 30px;
    position :absolute;
    top :10;
}

.masterDiv{
    background-color: grey;
    border: solid 1px;
    width: 80%;
    height:400px;
    margin-top: 60px;
    text-align: center;
    padding : 10px;
    position : relative;
}

私は実際には contentBack (太い黒い境界線) div をマスター div (灰色の背景) の中に入れたいと思っています。

メニューが表示されたときにメニューを右に押すのではなく、メニューをcontentBackに重ねて表示したいので、contentBackを相対的にしたくありません。

これに関する他の解決策はありますか？

p/s : jsfiddle 全体をコピーしてこの質問に貼り付ける必要がありますか?

4

2 に答える 2

2

これはあなたが探しているものに近いですか？http://jsfiddle.net/mBMq3/8/またはhttp://jsfiddle.net/mBMq3/10/ ? フローに保持される .masterDiv および .contentBack の高さはありません。

.masterDiv{
    background-color: grey;
    border: solid 1px;
    width: 80%;
    margin-top: 60px;
    text-align: center;
    padding : 10px;
    position : relative;
}
.menuDiv{
    position: absolute;
    z-index: 100;
    background-color: white;
    border: solid 1px;
    width: 200px;
    height: 300px;
    float: left;
}
.menuDiv li{
    text-decoration: none;
}
.menuButton{
    margin-top :-40px;
    position: relative;
    z-index: 100;
    width : 100px;
    height : 40px;
    float: left;
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);

    -moz-transform-origin :bottom left;
    -o-transform-origin :bottom left;
    -webkit-transform-origin :bottom left;

}
.contentBack{   
    width : 300px;
    border : solid 30px;
    position :;

}
.contentBackPadding{
    padding-left: 50px;

}
于 2013-07-18T08:10:00.547 に答える
0

right: 0あなたはあなたに何らかの価値を追加する必要があります.contentBack

デモ

次に、あなたに使用overflow: hiddenすることができます.masterDiv

于 2013-07-18T08:12:29.533 に答える