如何申请css位置:绝对正确?

时间:2012-05-30 14:20:51

标签: html css position absolute

问题是div,称为'dragger_container'不按我的预期行事,并从父div中退出。这是不可接受的,因为它是一个显示用户滚动进度的元素(它是一个jquery插件mCustomScrollBar)并与用户交互。
向任何人寻求帮助 提前谢谢

PS 无法附加屏幕的声誉原因,在此处上传: screen_url

.mcs_my_container
{
width: 100%;
height: 100%;
}

.mcs_my_container .customScrollBox
{
margin-top: 10px;
position: relative;
height: 80%;
width: 100%;
overflow:hidden;
border: 1px solid green;
display: block;
}

.mcs_my_container .customScrollBox .container
{
position: absolute;
width: 70%;
top: 0;
float: left;
margin-left: 20px;
}

.mcs_my_container .customScrollBox .content
{
clear: both;
}

.mcs_my_container .dragger_container
{
position: absolute;
/*top: 10px !important;*/
width: 2px;
/*height: 50px;50px
height: 100%;*/
height: 110px;
top: 0px;
right: 20px;
float: right;
background: #000;
cursor: s-resize;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
cursor: s-resize;
}

.mcs_my_container .dragger
{
position: absolute;
width: 4px;
/*height: 100%;*/
height: 10px;/* !important;*/
background: #999;
text-align: center;
line-height: 10px;
color: #666;
overflow: hidden;
cursor: pointer;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-left: -1px;
}

.mcs_my_container .dragger_pressed
{
position: absolute;
width: 6px;
margin-left: -2px;
height: 10px;
background: #999;
text-align: center;
line-height: 10px;
color: #666;
overflow: hidden;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: s-resize;
}

.divNoteText
{
position: static;
border: 1px solid red;
word-wrap: break-word;
}

1 个答案:

答案 0 :(得分:1)

您需要将position: relative添加到您希望其位于其中的dragger_container父容器中。

如果你不这样做,那么dragger_container将绝对定位到相对定位的最近的父元素,或者如果没有,那么它将位于body内。