Перекрыты и для меня. Измените 500 на 200, и более вероятно, что они будут перекрываться.
я есть элементы, которые перекрываются, и я хотел бы предотвратить это. Вот картинка:http://grab.by/cB7t
Кроме того, вот CSS для этих элементов:
.navigationItem {
background: #808080;
-webkit-border-radius: 360px;
padding: 1.0em;
text-decoration: none;
color: #fff;
position: absolute;
-webkit-box-shadow: 0px 2px 5px #909090;
font-weight: bold;
text-shadow: 1px 1px 2px #707070;
font-size: 1.0em;
}
И вот они в HTML:
<a href="#" class="navigationItem" id="nav0">play</a>
<a href="#" class="navigationItem" id="nav1">register</a>
<a href="#" class="navigationItem" id="nav2">our blog</a>
<a href="#" class="navigationItem" id="nav4">contact us</a>
<a href="#" class="navigationItem" id="nav5">about us</a>
<a href="#" class="navigationItem" id="nav6">our rules</a>`
Как вы можете видеть, я использую их как простые стилизованные ссылки, используя HTMLa
тег. Причина, по которой их позиции абсолютны, заключается в том, что я перемещаю их с помощью jQuery:
function moveAll() {
for(var i = 0; i < AMOUNT; i++) {
var random = Math.random() * 500;
$("#nav" + i).animate({"left": random + i + "px"}, "slow");
$("#nav" + i).animate({"top": random + i + "px"}, "slow");
}
}
Когда они двигаются, они иногда перекрываются, что раздражает. Как я могу предотвратить их перекрытие? Спасибо за ваши усилия.