How come outline is visible on one but not the other?

HTML & CSS
1

Not visible here: curtains open by themselves:

Not visible: outline: 1px solid red; https://jsfiddle.net/sc5z40ok/

How would I have the 1px line be visible here?

.curtain {
  overflow: hidden;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  outline: 1px solid red;
}

But that 1px line is visible here: https://jsfiddle.net/pdzcj6og/1/

The curtains don’t auto open here.

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  outline: 1px solid blue;
}

2

You can’t have the outline on ratio-keeper because you have hidden the overflow on .curtain. The outline is drawn outside the element so if you hide the overflow then you don’t see the outline.

If you added 1px padding to the curtain then the outline would show.

.curtain{padding:1px;}

However that may change the dynamics of everything else so you would need to check.

1 Like
3

Would I be able to somehow use z-index to place the outline over the curtain?

https://jsfiddle.net/qap26z4g/

4

The simplest answer would be to try it and see :slight_smile:

Let me do that for you:

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  outline: 1px solid blue;
  z-index:1;
}
5

That works but causes the fence and fan to show through the curtain.

Would that be fixed by giving those z-index numbers, or a different way?

https://jsfiddle.net/8avu3r7s/1/

6

So what does that tell you about how the elements are stacked?

You can’t have the border above and the background below on the same element. It’s either above or below. It can’t be both at the same time.

You would need a separate element for your border (which we have done before).

e.g.

.curtain:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
  border:1px solid blue;
  z-index:2;
 pointer-events:none;/* just in case*/
}
1 Like
7

pointer-events: none;

Yes, definitely needed.

Easy way to test.

Add a video.

If the video is not clickable, then pointer-events: none; is needed.

https://jsfiddle.net/6e1kvhgy/

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.