1

I have:

<div id="header"><button id="button1"/></div>
<div id="footer"></div>

Can I change (just in css, not js) the layout so button1 belongs to footer?

If this is not possible are there alternatives? (such as flex order allow dynamically to change the order of elements). My goal is to propose many different themes of an application without to modify the DOM layout (e.g. some people want the button to be in header, other prefer in footer).

NearHuscarl
  • 12,341
  • 5
  • 39
  • 69
yarek
  • 8,962
  • 25
  • 93
  • 180
  • 1
    make the button in the header AND the footer and show only one of them – Temani Afif Sep 21 '20 at 10:06
  • This is not a duplicate - this is asking if you can move an element to a new parent via CSS, the alleged duplicate is asking if you can select a parent based on the child. – brads3290 Sep 21 '20 at 18:57

1 Answers1

1

Can I change (just in css, not js) the layout so button1 belongs to footer ?

In a word, no.

What you are trying to do is change the actual structure of the page, which is not what CSS is for. CSS is (for the most part) about controlling the visual aspect of a web page, and HTML is for the structure. You could, I suppose, apply CSS styling to make the button appear as though it were a child of #footer (you might set position: relative and give it the appropriate offset so that it appears where it would have appeared if it were), but that’s hardly a reliable solution.

If you find yourself needing to do this, perhaps pure CSS is not really the appropriate solution? Could you offer the themes in the form of styles and scripts (where you could use the script to move the button)? Or perhaps offer HTML templates to be chosen from (e.g. whether the button should be in the header or footer), and then apply the CSS theme on top of that.

brads3290
  • 1,142
  • 1
  • 9
  • 17