Question

我试图找出如何使div处于固定位置。当我单击parent-div时，child-div在相对位置向下切换。我不想要那个。我希望child-div处于固定位置，以便覆盖下一个div。喜欢选择。工作小提琴here

HTML

<div class="select-container-funds">
    <div class="select-box-funds">
        <span class="selected-option-funds">
            1
        </span>
        <span class="select-arrow">
            <span class="icon icon-arrow-down-blue"></span>
        </span>
        <div class="funds-info">
            <div class="funds-container">
                <h2>1</h2>
                <p class="funds-data">
                    3 mån %: <span>2.01</span><br />
                    2013 %: <span>2.01</span><br />
                    2012 %: <span>2.01</span><br />
                </p>
                <p>Senast uppdaterat 2014-01-21</p>
            </div>
        </div>
    </div>
</div>
<div class="select-container-funds">
    <div class="select-box-funds">
        <span class="selected-option-funds">
            2
        </span>
        <span class="select-arrow">
            <span class="icon icon-arrow-down-blue"></span>
        </span>
        <div class="funds-info">
            <div class="funds-container">
                <h2>2</h2>
                <p class="funds-data">
                    3 mån %: <span>2.01</span><br />
                    2013 %: <span>2.01</span><br />
                    2012 %: <span>2.01</span><br />
                </p>
                <p>Senast uppdaterat 2014-01-21</p>
            </div>
        </div>
    </div>
</div>
<div class="select-container-funds">
    <div class="select-box-funds">
        <span class="selected-option-funds">
            3
        </span>
        <span class="select-arrow">
            <span class="icon icon-arrow-down-blue"></span>
        </span>
        <div class="funds-info">
            <div class="funds-container">
                <h2>3</h2>
                <p class="funds-data">
                    3 mån %: <span>2.01</span><br />
                    2013 %: <span>2.01</span><br />
                    2012 %: <span>2.01</span><br />
                </p>
                <p>Senast uppdaterat 2014-01-21</p>
            </div>
        </div>
    </div>
</div>

CSS

.samo-sans {
  font-family: arial;
}
.text-center {
  text-align: center;
}
.select-container-funds {
  position: relative;
  cursor: pointer;
  font-family: arial;
  margin-bottom: 20px;
}
.select-container-funds .select-box-funds {
  background: #d3d3d3;
  color: #a9a9a9;
  font-size: 1.1em;
  line-height: 55px;
}
.select-container-funds .select-box-funds.active {
  background: #4682b4;
}
.select-container-funds .select-box-funds > .selected-option-funds {
  padding: 0 1em;
}
.select-container-funds .select-box-funds.funds-info {
  width: 100%;
  background: #4682b4;
}
.select-container-funds .select-box-funds.funds-info.funds-data {
  width: 200px;
}
.select-container-funds .funds-info {
  height: 320px;
  border-top: 2px solid #90ee90;
  display: none;
}
.select-container-funds .funds-info > .funds-container {
  padding: 40px 20px 0 20px;
}
.select-container-funds .select-arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 55px;
  overflow: hidden;
  background: #808080;
  text-align: center;
}

的JavaScript / jQuery的

$(".select-box-funds").on("click", function (e) {
    e.preventDefault();
    var isSelected = $(this);
        $(isSelected).children(".funds-info").toggle();
        $(isSelected).toggleClass("active");
});

Answer 1

您应该使用以下属性修改此css类：

.select-container-funds .funds-info {
    position: absolute;
    background: #4682b4;
    z-index: 1; /* should be >=1 */
    width: 100%;
...
}

jsfiddle

Answer 2

JSfiddle Demo

.funds-info {
    /* I also removed the height previously declared as this is now 'auto' */
    position: absolute;
    z-index:2;
    background: #4682b4;
    width:100%;
    top:100%;
}

Answer 3

尝试执行以下css更改，

.select-container-funds .funds-info {
  height: 375px;
  border-top: 2px solid #90ee90;
  display: none;
  position: absolute;
  z-index: 100;
  width: 100%;
  background: gray;
}

如何让child-div有一个固定的位置？

3 个答案: