1

I'm trying to achieve a sliding-door effect on a span contained within an h2 element. The h2 element has position set to relative in order to enable z-index, so far so good. The span is floated to the right within this h2 element and has a z-index set to lower than the h2's in order to slide under it when the view contracts, but keep sticking out under as if only the 'float' matters here.

But here's what I get instead, followed by what I wish to get:

Current result of z-indexed span within z-indexed h2:

Desired result

CSS for containing H2 element:

 width: 400px; 
 height: 24px;
 font-size: 13px;
 vertical-align: bottom;
 position: relative;
 z-index: 5;
 padding: 2px;
 color: white;
 text-align: left;
 background: url('left-door.gif') top left no-repeat;

CSS for nested span element:

 width: 200px;
 height: 100%;
 float: right;
 z-index: 0;
 text-align: center;
 background: url('right-door.gif') top right no-repeat;

Anyone knows why the span refuses to sit level with the h2 even though the h2's fixed height ought to cap it within (setting clear: both on the h2 did nothing), and to be obscured by it when the view shrinks? It is because it's nested?

(Also, 'vertical-align' has no effect, the text doesn't settle on text-bottom but sits in vertical middle. Btw, just got started with this tinkering, but happen to be in a hurry. thanks.)

Edit: After BHouwens answer, i tried by reducing the text content of the H2 (real code has text), and the span aligns level, only problem is the z-index doesn't seem to work, but from what I remember from a previous question, z-index doesn't work on nested elements, as in they can't be stacked above or below their parent. Thanks for helping to troubleshoot! This has helped me focus better, and now think I'll just add two spans within the h2!

slackexchange
  • 55
  • 1
  • 9
  • can you post your code on a snippet with minmal html? – silviagreen Mar 01 '16 at 08:08
  • Though, I'm not sure whether this will actually solve the problem. You should put your span element with any position OTHER than the default static. So add "position: relative;" to your span. Also, have the z-index of your span at a negative value. – HTMLNoob Mar 01 '16 at 08:10
  • Also, to answer your other question "Why the span refuses to sit level with the h2 even though the h2's fixed height ought to cap it ". You need to know how text-align behaves. Think of it as this: imagine if the property padding-right: auto; existed. That's exactly what text-align:left does. If you were to add text-align: center, it could be imagined as padding-left: auto, and padding-right: auto. Now, the h2 blocks off your span from becoming inline, because it's 'padding' blocks it from doing so. – HTMLNoob Mar 01 '16 at 08:18
  • To prove my point here is a codepen example: http://codepen.io/HTMLNoob/details/xVbpxB – HTMLNoob Mar 01 '16 at 08:44
  • Thanks for the suggestions so far, but tried adding position: relative and setting z-index to - on the span, it still sits above the h2, so i guess the first question is why the z-index isn't working (I'm assuming it's because the span is nested within the h2, based on prev. experience, that the z-index doesn't apply between parent and child, but hope to be wrong). – slackexchange Mar 01 '16 at 22:11

2 Answers2

0

May be, below code will work for you!

h2 {
  width: 400px;
  height: 24px;
  font-size: 13px;
  vertical-align: bottom;
  position: relative;
  display: table-cell;
  z-index: 5;
  padding: 2px;
  color: white;
  background: #ff0;

}
span {
  width: 200px;
  height: 100%;
  right: 0px;
  top: 0px;
  z-index: 0;
  text-align: center;
  background: #f00;
  position: absolute;
}
span .wrap {
  display: table-cell;
  height: 24px;
  width: inherit;
  vertical-align: bottom;
  text-align: center;
}
<h2>
  H2
  <span>
    <div class="wrap">Span</div>
  </span>
</h2>
xaid
  • 716
  • 1
  • 7
  • 18
0

Made a fiddle with your code only, which achieves your desired result: https://jsfiddle.net/dzpfkoLy/

My guess is you've got some other CSS acting on these elements (you can inspect with dev tools in Chrome or Firefox to see what this could be). Otherwise, if you want to ensure the result you need, you can set your span to

span {
   // other span styling

   position: absolute;
   right: 0;
   top: 0;
}

Which will shunt it to the top right of the h2. You can then play with z-index to get whatever kind of ordering you're after.

BHouwens
  • 390
  • 5
  • 12
  • Great.thanks so much for that, because now I can focus on the remaining stuff. Btw, that seems at the moment to be the content, as the pics I uploaded were just graphic examples, so thanks a lot for saving me the time, will report back if/when solved. Edit: Just tested, it was the content which was too long, will edit the op, but the z-index still doesn't work, see edit in op. Btw, position absolute is definitely a candidate. – slackexchange Mar 02 '16 at 00:23
  • @slackexchange oh yeah z-index won't work on nested elements, so you'll have to create a `position:relative` container and then put absolutely positioned elements inside it – BHouwens Mar 03 '16 at 05:54