OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to show a child element on top of it's parents and siblings by using CSS only

  • Thread starter Thread starter a0m0rajab
  • Start date Start date
A

a0m0rajab

Guest

the problem​


I am trying to add some options on top of Twitter UI for text editing, but when I do that, I get an issue, and I cannot show the element on top of other elements. It's always being shown behind the siblings.

The code​


Here is the code I am trying and running it on https://twitter.com/home

Code:
let tweetArea = document.querySelector(".public-DraftStyleDefault-block");

const unlistedItems = document.createElement('ul');
unlistedItems.innerHTML += `
  <li> Option 0</li>
  <li> Option 1</li>
  <li> Option 2</li>
  <li> Option 3</li>`;
unlistedItems.style.position = 'absolute';
unlistedItems.style.top = '0';
unlistedItems.style.backgroundColor = "red";
unlistedItems.style.zIndex = '100';

tweetArea.parentNode.insertBefore(unlistedItems, tweetArea);

The current vs desired behavior:​


I am getting this result which adds the element but it does not show it on top of the siblings and parents. I want my element to be visible and shown even on top of the Gif icon and toolbar. How can I achieve that?

enter image description here

What did I try?​


As for this I tried to use Z-index but it did not work and could not figure out what is the reason even though I used a really high one.

Questions that I checked:


<h2>the problem</h2>
<p>I am trying to add some options on top of Twitter UI for text editing, but when I do that, I get an issue, and I cannot show the element on top of other elements. It's always being shown behind the siblings.</p>
<h2>The code</h2>
<p>Here is the code I am trying and running it on <a href="https://twitter.com/home" rel="nofollow noreferrer">https://twitter.com/home</a></p>
<pre><code>let tweetArea = document.querySelector(".public-DraftStyleDefault-block");

const unlistedItems = document.createElement('ul');
unlistedItems.innerHTML += `
<li> Option 0</li>
<li> Option 1</li>
<li> Option 2</li>
<li> Option 3</li>`;
unlistedItems.style.position = 'absolute';
unlistedItems.style.top = '0';
unlistedItems.style.backgroundColor = "red";
unlistedItems.style.zIndex = '100';

tweetArea.parentNode.insertBefore(unlistedItems, tweetArea);
</code></pre>
<h3>The current vs desired behavior:</h3>
<p>I am getting this result which adds the element but it does not show it on top of the siblings and parents. I want my element to be visible and shown even on top of the Gif icon and toolbar. How can I achieve that?</p>
<p><a href="https://i.sstatic.net/4itLB.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/4itLB.png" alt="enter image description here" /></a></p>
<h2>What did I try?</h2>
<p>As for this I tried to use Z-index but it did not work and could not figure out what is the reason even though I used a really high one.</p>
<p>Questions that I checked:</p>
<ul>
<li><a href="https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">How to overlay one div over another div</a></li>
<li><a href="https://stackoverflow.com/questions...parent-element-and-siblings-of-the-parent-ele">How can I show child element above parent element AND siblings of the parent element?</a></li>
<li><a href="https://stackoverflow.com/questions...the-sibling-of-its-parent-which-has-been-z-in">HTML stack a child element above the sibling of it&#39;s parent, which has been z-index&#39;d above the parent</a></li>
<li><a href="https://stackoverflow.com/questions/1174874/show-child-element-above-parent-element-using-css">Show child element above parent element using CSS</a></li>
</ul>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top