Marko Marko - 1 month ago 12
CSS Question

Position of absolute child element relative to grandparent, not parent... and child should remain hidden until clicked

Child span element should be hidden until clicked; after it's revealed child should be all the way left and 80% width of the screen size, relative to grandparent, not parent.

This is the code:



<p>Text text text text

<span style="position: relative; display: inline-block; vertical-align: top; background: #dddddd; overflow: hidden;" onclick="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">(activeword)
<span style="position: absolute; background: white; border: 1px solid black;">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, big text here, dolor sit amet, consectetur adipiscing elit.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, second even bigger text here, dolor sit amet, consectetur adipiscing elit.

</span>
</span>

text text text end of paragraph text.</p>





(Notes: Can't use external CSS; can't use pseudo-elements as they can't go inline)

Answer

You'll have to either move the position: relative; to the p element (sample 1), or give the p position: relative; and move the inner span outside the outer span (sample 2)

A side note, I recommend you use an external CSS style sheet instead of inline styles

Updated both samples with a click handler showing/hiding the 2:d span, both as a child and sibling

Sample 1 - updated

<p style="position: relative;">Text text text text

  <span style="display: inline-block; vertical-align: top; background: #dddddd; overflow: hidden;" onclick="this.children[this.children.length-1].style.display='block';" onmouseout="this.children[this.children.length-1].style.display='none';">(activeword)
    <span style="position: absolute; background: white; border: 1px solid black; display: none; left: 10%; width: 80%;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, big text here, dolor sit amet, consectetur adipiscing elit.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, second even bigger text here, dolor sit amet, consectetur adipiscing elit.
    </span>
  </span>

  text text text end of paragraph text.</p>

Sample 2 - updated

<p style="position: relative;">Text text text text

  <span style="position: relative; display: inline-block; vertical-align: top; background: #dddddd; overflow: hidden;" onclick="this.nextElementSibling.style.display='block';" onmouseout="this.nextElementSibling.style.display='none';">(activeword)  
  </span>
  <span style="position: absolute; background: white; border: 1px solid black; display: none; left: 10%; width: 80%;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, big text here, dolor sit amet, consectetur adipiscing elit.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, second even bigger text here, dolor sit amet, consectetur adipiscing elit.
  </span>
  
text text text end of paragraph text.</p>