-webkit-column-count дает с неожиданными результатами

Question

Так что я использую -webkit-column-count на теге p, который содержит несколько тегов span. Каждый пролет содержит одну букву.

Между тегами span есть еще один диапазон, который можно перетащить, чтобы пользователь мог перетащить его туда, куда захочет.

Проблема возникает, когда пользователь бросает ее на край тега p.

Когда это происходит, изображение вырезается из рамки.

Не могу сказать, почему ..

Единственное, что я вижу, когда я удалить Z-индекс от dragable пролетом внезапно работает хорошо, но второй dragable промежуток сойдите это положение.

Пожалуйста, смотрите на примере JSFiddle

Это мой HTML код:

<div> 
<p class="two_columns"> 
<span class="ui-draggable">&nbsp;</span> 
Lorem ipsum sit amet, consectetur adipiscing sdfsdf consectetur adipiscing sdfsdf 
consectetur adipiscing sdfsdf elit. Praesent rhoncus tellus purus 
<span class="ui-draggable">&nbsp;</span>, utfacilisis ipsum posu ere eget. Cras 
susciconsectetur adipiscing sdfsdf consectetur adipiscing sdfsdfdio.</p> 
</div> 

И это мой CSS:

div { 
    width: 80%; 
    margin: 20px auto; 
} 

p { 
    overflow: visible !important; 
    margin: 0; 
    -webkit-column-count: 2; 
} 

.ui-draggable { 
    text-indent: -9999px; 
    display: inline !important; 
    z-index: 100; 
    cursor: pointer; 
    position: relative; 
    font-size: 0; 
    line-height: 0; 
} 
.ui-draggable::after { 
    position: absolute; 
content: ''; 
width: 24px; 
height: 30px; 
background: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQLBPLYyDEATQHLjBBl5UD-pSD9PI5rv_EAElcSPT7HGk2LKSKeAVkgCa-o") no-repeat; 
cursor: pointer; 
left: -10px; 
top: -20px; 
background-size: 100%; 
} 

Answer 1

Вы абсолютно расположены: после псевдо на вы ui-draggable класс. Это заставит изображение всплывать над всем (это то, что делает абсолютное позиционирование, плавать над существующим макетом).

Один из способов исправить это, чтобы добавить запас к Ui-перетаскиваемым класса, чтобы освободить место для иконки:

margin: 0 15px 0 5px;

Я также беспокоиться о том, почему вы используете так много пролетов, когда большинство у них вообще нет стиля. Посмотрите на удаление некоторого избытка, если сможете. Чем меньше элементов HTML, тем проще, так это заставить себя вести себя.