Good day to all, recently I was asked to perform one task that put me at a dead end, they decided to give up such implementation but I still wondered how to implement this action and whether its implementation is possible at all.

Actually, the task is to display a certain text block in the page code from above, and physically on the site it is present from below. I understand that it can be done by indentation with absolute positioning, but for some reason it seems to me that this is not the right option. Maybe someone came across a similar and why do they want to do this?

  • .footer { flex: 0 0 auto; } .footer { flex: 0 0 auto; } - Sublihim
  • I know one application. People with disabilities also use the Internet. They may not be able to read the text on the page (for example, poor eyesight) and they use special reading rooms that read the text from the screen. So they will read the text like that, but ordinary users will probably never see it. - KoVadim
  • @KoVadim Accessible Rich Internet Applications (WAI-ARIA) standard has been developed for people with disabilities w3.org/TR/wai-aria/roles - nikant25
  • This is implemented in jQueryMobile as a pop-up view.jquerymobile.com/master/demos/popup , in order to save space for mobs. devices. - nikant25
  • @ nikant25 I'm aware of all this. But some developers are trying to outwit them. - KoVadim

1 answer 1

For this task, it is better to use flexbox features, in particular, the CSS order property. Here is an example of markup:

 .flex { display: flex; flex-direction: column; } .flex p { background-color: #ccc; } .first { order: -1; } 
 <div class="flex"> <div class="second"> <p>Второй блок.</p> </div> <div class="first"> <p>Первый блок.</p> </div> </div>
In the example, the container is set to the display: flex property. To make the children go vertically, the flex-direction: column property is added. And so that the blocks with the text are lined up in the right order, the order property is used.