CSS - inline not working with position absolute - css

Question

Here is an image of what I'm trying to achieve.
HTML:
<h2>Some text<br /> even more text</h2>
CSS
Works
display: inline;
line-height: 1.7em;
font-size: 65px;
color: #333;
background-color: #FFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
Doesn't work
display: inline;
line-height: 1.7em;
position: absolute;
top: 80px;
z-index: 2;
font-size: 65px;
color: #333;
background-color: #FFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
Any idea on how to fix this?

Answer 1

inline implicitly becomes block when you absolutely position an element, see
Css 2.1, 9.7 Relationships between 'display', 'position', and 'float'
You will need to use an additional inline element inside this heading, if you want to achieve this effect.

Answer 2

Three steps:
Wrap each part of the <h2> heading in a <span>
Give each span a display of inline-block
Apply the box-shadow to each span
Working Example:
h2:nth-of-type(1) {
display: inline;
line-height: 1.7em;
font-size: 18px;
color: #333;
background-color: #FFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
h2:nth-of-type(2) {
display: inline-block;
position: absolute;
top: 80px;
z-index: 2;
color: #333;
background-color: #FFF;
}
h2:nth-of-type(2) span {
display: inline-block;
font-size: 18px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
<h2>Some text<br />even more text</h2>
<h2><span>Some text</span><br /><span>even more text</span></h2>