1

我在某些position:absolute Divs.

在我完成这项position工作之前——我需要它作为边界箭头——它工作得很好。但是，我使用后position:absolute效果divs不再起作用。所以，我相信这与在Div不存在的情况下产生的效果有关？

我的 HTML：

<div style="width: 200px; border-width: 1px; border: dotted" onclick="clickDiv();">
    click me
</div>
<div id="DivTeste">
    <div class="chat-bubble-arrow-border"></div>
    <div class="chat-bubble-arrow"></div>
    <div class="teste box">
        <p>e</p>
        <p>e</p>
        <p>e</p>
        <p>e</p>
        <p>e</p>
    </div>
</div>

我的 CSS：

.box {
   overflow: auto;
   display: block;
   height:100px;
   width: 200px;
   border-width: 1px;
   border: solid;
   top: 50px;
   position:absolute;
}

.chat-bubble-arrow-border {
   border-color: transparent transparent #000 transparent;
   border-style: solid;
   border-width: 10px;
   height:0;
   width:0;
   position:absolute;
   top: 30px;
   left:30px;
}


.chat-bubble-arrow {
   border-color: transparent transparent #fff transparent;
   border-style: solid;
   border-width: 10px;
   height: 0;
   width: 0;
   position: absolute;
   left: 30px;
   top: 33px;
   z-index: 100;
}

还有我的 JS：

$(function () {
   $('#DivTeste').hide();
});

function clickDiv() {
   $('#DivTeste').slideToggle();
}
4

2 回答 2

1

我只是破解了代码并使其与相对位置一起工作。

从类框中更改了这两个：

   top: 16px;
   position: relative;

http://jsfiddle.net/sanman/4xsZM/

你为什么不使用像qTip这样的东西来做你想做的事情。

于 2013-05-09T08:03:20.723 回答
0

查看我为您尝试的解决方案。无论如何稍微修改了您的编码，但没有什么大不了的。

click here for JS Fiddle 

$(document).ready(function(){
    $('#click').click(function(){
        $('#DivTeste').slideToggle(500);
    })
});
.box {
   overflow: auto;
   display: block;
   height:100px;
   width: 200px;
   border-width: 1px;
   border: solid;
   top: 50px;
   position:absolute;
}

#DivTeste{
display:none;
}

.chat-bubble-arrow-border {
   border-color: transparent transparent #000 transparent;
   border-style: solid;
   border-width: 10px;
   height:0;
   width:0;
   position:absolute;
   top: 30px;
   left:30px;
}


.chat-bubble-arrow {
   border-color: transparent transparent #fff transparent;
   border-style: solid;
   border-width: 10px;
   height: 0;
   width: 0;
   position: absolute;
   left: 30px;
   top: 33px;
   z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="click" style="width: 200px; border-width: 1px; border: dotted; cursor:pointer">
    click me
</div>
<div id="DivTeste">
    <div class="chat-bubble-arrow-border"></div>
    <div class="chat-bubble-arrow"></div>
    <div class="teste box">
        <p>e</p>
        <p>e</p>
        <p>e</p>
        <p>e</p>
        <p>e</p>
    </div>
</div>

希望有帮助。

于 2013-05-08T11:00:11.430 回答