使用CSS，当广告位于源代码中的最后位置时，您如何在语义结构化的HTML5页面上推送广告？

Question

This is a hypothetical question, as I haven't really written any HTML code in years. Provided you have an HTML page, and its content is semantically structured (so you have your main content in a <main> and <article> tag etc.), you would probably have your ads as one of the last elements in your source code, as they will semantically be least important. Financially, however, they would be rather crucial, so you'd like to have them displayed at the top of your page, above the "fold" (maybe in a right-hand column or "sidebar").

Is there a way to "push"/move an aside or div container (holding your ads) up in a sidebar/column, just using CSS - without having to absolutely position them?

Would you position them relative to the containing element (that forms the column), then add margin-top to the element that would be next visually (ie first child of the column element - say your navigation)?

Is there a way of doing this if you don't know the height of the "ad" containing element in advance (say because it's containing text, not an ad)?

Is there a way of achieving this, nowadays, with the latest HTML and CSS features? Or is visual design still dictating markup structure after all? :)

Answer 1

It's possible in CSS 3 using display: flex-box and order: # to reorder how elements display, but CSS 3 only works in modern browsers.

It doesn't make sense to do this when the ad will always be in a specific place, though. Save yourself and others the confusion, and keep HTML in charge of layout.

Is visual design still dictating markup structure after all?

This question sounds backwards. " Does markup structure still dictate visual design? "
No , that ended with the rise of CSS2 positioning.

Answer 2

You can use JS to create a widget and position it wherever you want in the layout, or create the ads as separate templates and use JS to retrieve and position them. This will work in almost any browser.

For the most part if your requirements are simple then it will be easier to simply place the ad element where it is required in the markup.

Visual design does not directly dictate markup, but designing markup with layout in mind makes life easier.