CODEWITHSUNDEEP
css
psteinweber
psteinweber

Reputation: 813

CSS border trick makes DIV unclickable

I made use of a border trick I found somewhere else, basically overlaying a absolute positioned DIV over the content div. It does create the effect though that there is no interaction possible with the original content, i.e. highlighting the text or clicking a button.

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

I thought adding the z-index should resolve the issue, although it doesn't seem to have any effect. What am I overseeing?

Here's a fiddle

Upvotes: 0

Views: 269

Answers (4)

Amrinder Singh
Amrinder Singh

Reputation: 5502

Nothing to worry.... Just add..

pointer-events: none

in your css

Upvotes: 0

m59
m59

Reputation: 43785

It's still unclear what you're looking for. You currently have a div that is unclickable because of the overlay. If you want that, you could use pointer-events: none as I said in the comments and user-select: none;. Just note that user-select has to be vendor prefixed for compatibility.

If you do want it to be clickable, you could get rid of the overlay altogether. The same style can be accomplished simply like this:

<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).

Upvotes: 2

L.C. Echo Chan
L.C. Echo Chan

Reputation: 596

z-index will have effect on position:absolute/position:relative elements only. As your text and button is not position:absolute/position:relative elements. .stamp-border will always above them. Moreover, z-index of a chlid element can't smaller then the parent element.

You can create a "container" div to be the parent of both .post-cta and .stamp-border. Like the following.

 <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;
}

Upvotes: 0

kamus
kamus

Reputation: 797

just add 

pointer-events: none

The fiddle:

http://jsfiddle.net/KRWVA/2/

Upvotes: 4

Related Questions