Question

修改

当我使用正确的“0”设置.list时，其余的定位是自动...因为我正在为响应式布局开发这个，我的容器将没有固定的高度，宽度..所以我需要使用jQuery获取职位，

e.g. $("#btnHideList").css({ 'right': .. based on position of list
same with top or bottom

我正在尝试创建一个列表，其左下角附有一个hideMe按钮，但我无法弄清楚我可以在这里使用哪种CSS技术。

http://jsfiddle.net/fwkWG/440/

HTML

<div class="container">
    <div id = "clickMe" style="height:100px;width:100px;background:red">ClickMe</div>
    <div class="list">my list</div>
    <div id='btnHideList' class = "btn">
       <span class="click">Hide</span>
    </div>
</div>

JS

$("#clickMe").on("click", function() {
    $("#btnHideList").show();
    $(".list").show("slide", { direction: "right" }, 3000);
});

CSS

.container {
    position:relative;
    top:20px;
    left:20px;
    width:600px;
    height:600px;
    border-left:10px dashed darkgreen;
    background-color:green;
    height:800px;
    padding-left:40px;
}
.list {
    display:none;
    position:absolute;
    right:0;
    background-color:blue;
    width:300px;
    height:300px;
}
.btn {

    position:absolute;
    background-color:yellow;
    width:100px;
    height:100px;
}


#btnHideList {
    display:none;
    position: absolute;
    width: 100px;
    right: 0px;
    background: rgb(117, 231, 117);
    top: 300px;
    border-radius: 5px 0px 0 5px;
    color: #fff;
    text-align: center;
    padding: 40px 0;
    cursor:pointer;
}

期待这个，

enter image description here

Answer 1

<强> CSS
希望这会成为伎俩。

.list {
      display: none;
      position: absolute;
      right: 0;
      background-color: blue;
      width: 300px;
      height: 300px;
      z-index:10;
}
#btnHideList {
      display: none;
      position: absolute;
      width: 100px;
      right: 300px;
      background: rgb(117, 231, 117);
      top: 200px;
      border-radius: 5px 0px 0 5px;
      color: #fff;
      text-align: center;
      padding: 40px 0;
      cursor: pointer;
    height:20px;
}

DEMO

Answer 2

检查这个小提琴Demo - 标记中的一些变化＆amp;的CSS。

$("#clickMe").on("click", function() {
    $(".list").show();    
});
$("#btnHideList").on("click", function() {
    $(".list").hide();    
});

Answer 3

替换你的css类

#btnHideList {
    display:none;
    position: absolute;
    width: 100px;
    right: 300px;
    background: rgb(117, 231, 117);
    top: 150px;
    border-radius: 5px 0px 0 5px;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    cursor:pointer;
}

CSS定位绝对绝对

3 个答案: