Czy można przenieść div w css?

Question

Cześć (:

Chciałam zmienić wygląd na stronie sklepu, gdzie zmiany mogę wprowadzać tylko w css. Chciałam przenieść pewnego diva z bannerem, który obecnie jest w divie, który niestety nie ma całej szerokości strony. Chciałabym go umieścić bezpośrednio w innym divie, który jest nad nim. Wygląda to tak:

<div id=glowny>
     <div id=boczny> </div>
     <div id=srodkowy1>
          <div id=srodkowy2>
               <div id=srodkowy3>
                    <div id=gorny></div>
                    <div id=baner></div>
               </div>
          </div>
     </div>
</div>

Chciałabym aby div#baner wyciągnąć i przenieść do div#glowny

Czy jest opcja żeby to zrobić w jakiś sposób w css?

Z góry dziękuję <3

Comments

Jeśli nie masz dostępu do kodu HTML (ani JavaScript, którym alternatywnie można taką zmianę zrobić), to może poproś o taką zmianę kogoś, kto ma dostęp lub zapytaj o przyznanie Tobie dostępu? Przeniesienie elementu w CSS jest możliwe (przez np. position), ale jeśli intencją jest zmiana struktury strony, to lepiej ją zrobić w HTML.

---

ScriptyChris Czasem trzeba zmienić pozycje tylko na mobile ;) Fajnie się sprawdzają do tego flex i grid ;)

Jednak jeśli nie chodzi o styl dla mobile jestem za tym aby zmienić HTMLa. Tak jak mówisz ;)

---

Ok, do wizualnego przesunięcia można użyć Flexbox/Grid, ale... autorka chce przenieść element #baner do #glowny, a więc element o kilkustopniowym zagnieżdżeniu. Jeśli dobrze rozumiem problem, to tego AFAIK się nie da zrobić przy użyciu Flexbox, a Gridem - jeśli już - to z pomocą Subgrid, który jest wspierany póki co tylko w Firefox.

---

Wiemy tylko jak autorka chciała wpłynąć na HTML. Nie wiemy jaki efekt wizualny chce osiągnąć. Być może grid starczy. Zobaczymy ;)

Nie znałem subgrida :o Ciekawe! Dzięki za link ;)

---

@skylar, Można spróbować stworzyć takiego "potworka" (i zostać css-owym Frankenstein-em  ) za pomocą: position: absolute i ujemnych wartości dla top i left.

 

przykład 

od

<div id=glowny>
  <div id=boczny></div>
  <div id=srodkowy1>
    <div id=srodkowy2>
      <div id=srodkowy3>
        <div id=gorny></div>
        <div id=baner></div>
      </div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}
#glowny {
  position: relative;
  display: flex;
  width: 80vw;
  height: 100vw;
  margin: 0 auto;
  background-color: aqua;
  border: 5px solid aqua;
  padding: 0;
}
#glowny #boczny {
  position: relative;
  width: 30%;
  height: 100%;
  background-color: red;
  border: 5px solid darkred;
  margin: 0;
}
#glowny #srodkowy1 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: green;
  border: 5px solid darkgreen;
  margin: 0;
}
#glowny #srodkowy1 #srodkowy2 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: yellow;
  border: 5px solid goldenrod;
  margin: 0;  
}
#glowny #srodkowy1 #srodkowy2 #srodkowy3 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: mediumpurple;
  border: 5px solid indigo;
  margin: 0;  
}
#glowny #srodkowy1 #srodkowy2 #srodkowy3 #baner {
  position: relative;
  width: 100%;
  height: 5em;
  background-color: rosybrown;
  border: 5px solid brown;
  margin: 0;   
}
#glowny #srodkowy1 #srodkowy2 #srodkowy3 #gorny {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: salmon;
  border: 5px solid brown;
  margin: 0;   
}

#glowny #boczny::before,
#glowny #srodkowy1 #srodkowy2 #srodkowy3 #gorny::before,
#glowny #srodkowy1 #srodkowy2 #srodkowy3 #baner::before {
  content: '#'attr(id);
  position: absolute;
  top: 2em;
  left: 2em;
  font: 900 1.1em/1 monospace;
}

 

---

do

<div id=glowny>
  <div id=boczny></div>
  <div id=srodkowy1>
    <div id=srodkowy2>
      <div id=srodkowy3>
        <div id=gorny></div>
        <div id=baner></div>
      </div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}
#glowny {
  position: relative;
  display: flex;
  width: 80vw;
  height: 100vh;
  margin: 0 auto;
  background-color: aqua;
  border: 5px solid aqua;
  padding: 0;
  padding-top: 5em; /* dodane */
}
#glowny #boczny {
  position: relative;
  width: 30%;
  height: 100%;
  background-color: red;
  border: 5px solid darkred;
  margin: 0;
}
#glowny #srodkowy1 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: green;
  border: 5px solid darkgreen;
  margin: 0;
}
#glowny #srodkowy1 #srodkowy2 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: yellow;
  border: 5px solid goldenrod;
  margin: 0;  
}
#glowny #srodkowy1 #srodkowy2 #srodkowy3 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: mediumpurple;
  border: 5px solid indigo;
  margin: 0;  
}
#glowny #srodkowy1 #srodkowy2 #srodkowy3 #baner {
  position: absolute; /* zmienione */
  top: calc(0% - (5em + (3 * 5px))); /* dodane */
  left: calc((0% - (100vw - 80vw))); /* dodane */
  width: calc(80vw - 10px); /* zmienione */
  height: 5em;
  background-color: rosybrown;
  border: 5px solid brown;
  margin: 0;   
}
#glowny #srodkowy1 #srodkowy2 #srodkowy3 #gorny {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: salmon;
  border: 5px solid brown;
  margin: 0;   
}

#glowny #boczny::before,
#glowny #srodkowy1 #srodkowy2 #srodkowy3 #gorny::before,
#glowny #srodkowy1 #srodkowy2 #srodkowy3 #baner::before {
  content: '#'attr(id);
  position: absolute;
  top: 2em;
  left: 2em;
  font: 900 1.1em/1 monospace;
}

 

P.S. Nie powinno się tak robić - aczkolwiek można.

Answer 1

HTMLa nie zmienisz ale jego wyświetlanie owszem :) Jęśli chcesz te DIVy zamienić miejscami tostarczy display flex; i właściwość order:

 

#srodkowy3 {
    display:flex;
    flex-direction:column;
}
#gorny{
    order:0;
}
#baner{
    order:1;
}

PS. nie testowałem kodu być może order powinien być odwrotnie.

Jeśli potrzebujesz bardziej zaawansowanych ustawień możesz skorzystać z display grid;
 

#srodkowy3 {
    display:grid;
    grid-template-areas: 'baner', 'gorny'; /* odwracamy kolejność */
    grid-template-columns: auto;
    grid-template-rows: auto auto;
}
#gorny{
    grid-area: 'gorny'; /* przypisujemy nazwe */
}
#baner{
    grid-area: 'baner'; /* przypisujemy nazwe */
}

 

Comments

Ale autorka pytania, jeśli dobrze rozumiem, chce przenieść element #baner do poziomu #glowny (praktycznie root w strukturze, którą pokazała), a nie zamienić miejscami z #gorny (aktualnie rodzeństwo dla #baner), więc Flexbox/Grid tu raczej nie zadziałają.