你不能

Question

HTML：

<div class="shortList" id="unselShortList">
   <div id="Value1">A</div>
   <div id="Value2">B</div>
    <div id="Value3">C</div>
    <div id="Value4">D</div>
    <div id="Value5">E</div>
    <div id="Value6">F</div>
    <div id="Value7">G</div>
    <div id="Value8">H</div>
   <div id="SubmitValue">
      <div id="submit"><a href = "#">OK</a></div>
   </div>
</div>

CSS：

#unselShortList {
    background-color: red; 
    overflow: scroll;
    height: 150px;
    position: relative;    
}
#submit {
    position: absolute;
}

jsfiddle： http://jsfiddle.net/iyogesh/4sxNg/

＆＃39; OK＆＃39;超链接即将进入div。如何移动＆＃39; OK＆＃39;链接滚出的div并使用CSS在div之后显示它而不更改html结构？

Answer 1

简单回答：

你不能

（不幸的是）

因为您已在父容器上指定了overflow，所以您无法将子内容定位在其限制之外。您可以看到此here (without)与here (with)

的效果

在这种情况下，您需要在HTML中实现更改，或者查看其他样式选项 - 例如覆盖div右上角的按钮或使用javascript重新定位/添加元素DOM

Answer 2

选中此fiddle

添加父元素

<div id="unselShortList">
    <div class="shortList" >
        <div id="Value1">A</div>
        <div id="Value2">B</div>
        <div id="Value3">C</div>
        <div id="Value4">D</div>
        <div id="Value5">E</div>
        <div id="Value6">F</div>
        <div id="Value7">G</div>
        <div id="Value8">H</div>
    <div id="SubmitValue">
        <div id="submit"><a href = "#">OK</a></div>
    </div>
    </div>
</div>

CSS

#unselShortList {
position: relative;
padding-bottom:31px;
}
.shortList{
height: 150px;
background-color: #33cccc;
overflow: scroll;
margin-bottom:25px;
}
#submit {
position: absolute;
}
#SubmitValue{
position:absolute;
bottom:0;
}

Answer 3

尝试：

 #submit {
    position: fixed;
}

将元素移出滚动的div

3 个答案:

你不能