将Popup转换为Relative不起作用

问题描述：

我有一段在moseover上弹出消息的代码。它采用绝对定位编码，工作正常。但我需要将其改为相对定位，以便使代码更好地适用于移动设备。在这jsfiddle顶行是使用相对，并不起作用。底线是使用绝对和正在工作。请有人指出我要出错的地方吗？以下是我的代码：将Popup转换为Relative不起作用

<style> 
    .tooltips { 
     position: relative; 
     display: inline; 
    } 
    .spank{ 
     position: absolute; 
     width:250px; 
     color: #000; 
     background: #FFFFFF; 
     border: 1px solid #ccc; 
     padding:10px; 
     text-align: center; 
     display:none; 
     border-radius: 7px; 
     box-shadow: -1px 0px 7px #ccc; 
    } 
    .spank:before { 
     content: ''; 
     position: absolute; 
     top: 100%; 
     left: 50%; 
     margin-left: -12px; 
     width: 0; height: 0; 
     border-top: 10px solid #ccc; 
     border-right: 10px solid transparent; 
     border-left: 12px solid transparent; 
    } 
    .spank:after { 
     content: ''; 
     position: absolute; 
     top: 100%; 
     left: 50%; 
     margin-left: -8px; 
     width: 0; height: 0; 
     border-top: 8px solid #FFFFFF; 
     border-right: 8px solid transparent; 
     border-left: 8px solid transparent; 
    } 
    .showhim:hover .spank{ 
     display : block; 
     left:5px; 
     top:1px; 
     margin-left: 50px; 
     z-index: 999 
    } 
    .showhim { 
     left: 50px; 
     position: relative; 
     top: 80px; 
     width: 100px; 
    } 

    .spankme{ 
     position: absolute; 
     width:250px; 
     color: #000; 
     background: #FFFFFF; 
     border: 1px solid #ccc; 
     padding:10px; 
     text-align: center; 
     display:none; 
     border-radius: 7px; 
     box-shadow: -1px 0px 7px #ccc; 
    } 
    .spankme:before { 
     content: ''; 
     position: absolute; 
     top: 100%; 
     left: 50%; 
     margin-left: -12px; 
     width: 0; height: 0; 
     border-top: 10px solid #ccc; 
     border-right: 10px solid transparent; 
     border-left: 12px solid transparent; 
    } 
    .spankme:after { 
     content: ''; 
     position: absolute; 
     top: 100%; 
     left: 50%; 
     margin-left: -8px; 
     width: 0; height: 0; 
     border-top: 8px solid #FFFFFF; 
     border-right: 8px solid transparent; 
     border-left: 8px solid transparent; 
    } 
    .showme:hover .spankme{ 
     display : block; 
     left: 10px; 
     top:10px; 
     margin-left:50px; 
     z-index: 999 
    } 
    .showme { 
     position: relative; 
     width: 100px; 
    } 
    </style> 

    <div class="showme"> 
    <div class="showme tooltips">Mouse me</div> 
    <span class="spankme">Text on popupPlace</span> 
    </div> 

    <div class="showhim"> 
    <div class="showit tooltips">Mouse me</div> 
    <span class="spank">Text on popupPlace</span> 
    </div>

你到底想要改变什么是相对的？实际的弹出窗口？ – Peter

答

对于适用于.spankme的悬停，您并不是像使用.spank一样针对父级。以下将允许父母在悬停时引用孩子。

变化

.showme:hover .spankme

到

.showhim:hover .spankme

而且，你有三个的z-index：那些缺少结束分号999倍的性能。

将Popup转换为Relative不起作用

相关推荐