jQuery-如果div重叠，请调整CSS的最高值

Question

我有许多锚标记，其名称是动态生成的，但是它已经重叠了。

如果两个标签重叠，如何将CSS（最高值增加到20px）增加到第二个标签？

HTML：

<div class="main-div">
        <div class="social-links">
            <a href="javascript:;" data-social="Facebook"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-20.png" alt="Facebook" /></a>
            <a href="javascript:;" data-social="Twitter"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-20.png" alt="Twitter" /></a>
            <a href="javascript:;" data-social="Youtube"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/youtube_circle_color-20.png" alt="Youtube" /></a>
            <a href="javascript:;" data-social="Linkedin"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-20.png" alt="Linkedin" /></a>
        </div>
    </div>

CSS：

body{margin:50px auto;}
.main-div{width:600px;margin:auto;border:1px solid #ccc;font-family:verdana;font-size:13px;padding:120px 20px 10px 20px;background:#f5f5f5;}
.main-div a{display:inline-block;position:relative;}
.main-div a .popup-text{display:inline-block;position:absolute;top:-22px;left:0;background:#ccc;padding:2px 5px;border:1px solid #ffffff;}
.popup-text:before {content: "";display: block;background: red;width: 1px;height: 20px;float: left;margin: 0;position: absolute;left: 0px;top: 0px;height: 34px;}

JS：

$('.main-div').find('a').each(function() {
  var popupText = $(this).attr('data-social');
  $(this).append('<div class="popup-text">'+popupText+'</div>');
});

Fiddle

重叠

期望

Answer 1

请检查我的解决方案。您必须为集合:before伪添加更多动态类，并且必须动态设置顶部位置。

我已针对此图标的动态宽度对其进行了编辑。请注意，它不适用于自适应布局。

var newStyle = document.createElement('style');
				
var counter=0
$('.main-div').find('a').each(function(i) {
  var popupText = $(this).attr('data-social');
  $(this).append('<div class="popup-text popup-text-'+i+'" style="top:-'+(counter+1)*22+'px">'+popupText+'</div>');
  
  var beforeHeight=34+(counter*22);
  newStyle.appendChild(document.createTextNode(".popup-text-"+i+":before{height:"+beforeHeight+"px;}"));
	document.head.appendChild(newStyle);
  if($(this).outerWidth() < ($('.popup-text',$(this)).outerWidth())){
    counter++;
  }
});

body{margin:50px auto;}
.main-div{width:600px;margin:auto;border:1px solid #ccc;font-family:verdana;font-size:13px;padding:120px 20px 10px 20px;background:#f5f5f5;}
.main-div a{display:inline-block;position:relative;}
.main-div a .popup-text{display:inline-block;position:absolute;top:-22px;left:0;background:#ccc;padding:2px 5px;border:1px solid #ffffff;}
.popup-text:before {content: "";display: block;background: red;width: 1px;height: 20px;float: left;margin: 0;position: absolute;left: 0px;top: 0px;height: 34px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main-div">
		<div class="social-links">
			<a href="javascript:;" data-social="Facebook">
      <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-20.png" alt="Facebook" /></a>
			<a href="javascript:;" data-social="Twitter"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-20.png" alt="Twitter" /></a>
			<a href="javascript:;" data-social="Youtube"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/youtube_circle_color-20.png" alt="Youtube" /></a>
			<a href="javascript:;" data-social="Linkedin"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-20.png" alt="Linkedin" /></a>
		</div>
	</div>