CSS-трюк делает DIV unclickable

Я использовал трюк с границами, который я нашел где-то в другом месте, в основном накладывая абсолютный позиционированный DIV над содержимым div. Он действительно создает эффект, хотя нет возможности взаимодействия с исходным контентом, т. Е. Выделения текста или нажатия кнопки.CSS-трюк делает DIV unclickable

.stamp-border { 
    border-width: 10px; 
    border-style: solid; 
    position: absolute; 
    top: -10px; 
    left: -10px; 
    bottom: -10px; 
    right: -10px; 
    z-index: 0; 
}

Я думал, что добавление z-индекса должно решить проблему, хотя это, похоже, не имеет никакого эффекта. Что я наблюдаю?

Here's a fiddle

источник

2014-01-15 psteinweber

Возможно, вас заинтересует 'pointer-events: none'. – m59

В чем проблема? Кажется, это то, о чем вы просили. – m59

Но почему вы даете границу в абсолютном div? вы можете добиться того же эффекта, который дает границу в классе post-cta. – Era

Это до сих пор неясно, что вы ищете. В настоящее время у вас есть div, который является непривлекательным из-за наложения. Если вы этого хотите, вы можете использовать pointer-events: none, как я сказал в комментариях, и user-select: none;. Просто отметьте, что user-select должен быть префиксом для совместимости.

Если вы хотите, чтобы его можно было щелкнуть, вы могли бы полностью избавиться от наложения. Тот же стиль может быть выполнена просто, как это:

<div class="post-cta"> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur 
    adipisicing elit. Omnis consequatur deleniti 
    earum sed distinctio reiciendis vero sapiente 
    tenetur non natus? 
    </p> 
    <input type="submit"> 
</div>

CSS:

.post-cta { 
    background: white; 
    z-index: 1; 
    padding: 15px; 
    border: 10px solid black; 
    margin: 10px; 
}

Live demo of both solutions (click).

источник

2014-01-15 05:30:54 m59

Спасибо за объяснение. Избавление от наложения не работает в моем случае (вся установка сложнее, чем скрипка), но другое решение отлично работает. Я принял это как ответ, поскольку он предлагает более подробную информацию по этому вопросу, чем другие аналогичные подходы. – psteinweber

z-index будет иметь влияние на только position:absolute/position:relative элементов. Как ваш текст и кнопка не position:absolute/position:relative элементов. .stamp-border всегда будет над ними. Кроме того, z-index элемента chlid не может быть меньше родительского элемента.

Вы можете создать «контейнер» div как родительский .post-cta и .stamp-border. Как и далее.

<div class="container"> 
    <div class="stamp-border"></div> 
    <div class="post-cta"> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis consequatur deleniti earum sed distinctio reiciendis vero sapiente tenetur non natus?</p> 
    <input type="submit"> 
    </div> 
</div> 


//CSS Part 

.container{ 
    position:relative; 
}

источник

2014-01-15 05:22:37

Спасибо за разъяснение по проблеме z-index! – psteinweber

просто добавить