css使用可滑动菜单定位相对的绝对div

时间:2013-07-18 08:02:57

标签: jquery css

我真的不熟悉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复制并粘贴到这个问题上吗?

2 个答案:

答案 0 :(得分: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;

}

答案 1 :(得分:0)

您需要在right: 0

中添加.contentBack或某些值

demo

然后,您可以overflow: hidden使用.masterDiv