CODEWITHSUNDEEP
javascripthtmlcss
The KNVB
The KNVB

Reputation: 3844

is it possible to move the child element on the parent element by CSS only?

This is my code:

function go(){
    let container=document.getElementById("container");
  let selector=document.getElementById("selector");
  let domRect = container.getBoundingClientRect();
  selector.style.bottom=domRect.height+"px";
  /*
  selector.style.top=domRect.height+"px";
  */
  console.log(domRect.toJSON());  
}
.container,
.result,
.selector{
  display:inline;   
  position:relative;  
}
.selector{
  background-color:red;
  left:0;
  position:absolute;
  z-index:10;
}
<table width="70%" className="bb" border="1">
  <tbody>
    <tr>
      <td>Name</td>
      <td>Chan Tai Man</td>
    </tr>
    <tr>
      <td>Date of Birth</td>
      <td>
        <div class="container" id="container">
          <div class="result" id="result">1</div>
          <div class="selector" id="selector">2</div>
        </div><button onclick="go()">Go</button>
      </td>
    </tr>
    <tr>
      <td>gg</td>
      <td>
        <button>Go</button>
      </td>
    </tr>
    <tr>
      <td>Sex</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

When I click on the go button, the selector layer is moved to above of container.

  1. I want to know, is it possible to move the child element on the parent element by CSS only?
  2. Why the following code works?

selector.style.bottom=domRect.height+"px";

if I change it to the following, it does not work

selector.style.bottom=domRect.top+"px";

Upvotes: 0

Views: 253

Answers (1)

Ziku
Ziku

Reputation: 461

I'm afraid that simply isn't possible in CSS. You'll have to recreate the html elements in JS the way you want them to. If you want to do that, you can use JS methods such as document.createElement() parent.removeChild('childName') and element.appendChild(). Maybe the following steps will help

  • You can copy the child element
  • Remove it from the parent or container element
  • Take the element you copied from the parent element and append it to the parent of the parent element (the <td> in this case)

Upvotes: 1

Related Questions