CSS absolute positioning of elements in page background respecting contents layout

Question

Write an answer

Positioning an absolute element above other elements

How are the position of elements derived from the CSS attribute justify-content:space-between calculated?

Use position absolute? (CSS)

Apply CSS elements to only some pages in Mkdocs

css content element not showed in if display=flex

How to reset elements' position after 100% of CSS animation?

Unable to scrape content from next pages with complex layout

Align element under other element through css

Inline element's absolute child position problem

Vertically and horizontally aligned glosses using CSS after or elements for positioning

How to use absolute positioning in CSS to make the images in 2 rows of 3

Keep absolute content's position inside scrollable div

CSS. How to center spinner in absolute position block. (Block contain scroll)

Add/remove classes on element/component during page transitions in layout/default.vue

Selenium: No Such element exception when there is an element in the page

CSS Position Sticky weird behvaiour when scale applied to parent, sticky scrolls and different speed to element

Cast elements in UIElementCollection to Type of respective element

With DojoX Layout, is it possible to replace the content of a layout?

Background image not showing up on style.css with Tailwind CSS

jvelo · Answer 1

I made it simply using display: flex on the outward-most container, with both the content div and background div inside.

See https://jsfiddle.net/m8pk45re/1/

ProgrammerAnswered 1 years ago · Answer 2

Example

div.static {  position: static;  border: 3px solid #73AD21;}

Example

div.relative {  position: relative;  
left: 30px;  border: 3px solid #73AD21;}

Example

div.fixed {  position: fixed;  
bottom: 0;  right: 0;  width: 
300px;  border: 3px solid #73AD21;}

Example

div.relative {  position: relative;  
width: 400px;  height: 200px;  border: 3px solid #73AD21;}

div.absolute {  position: absolute; 
top: 80px;  right: 0;  width: 200px;  height: 100px;  border: 3px solid #73AD21;}

Example

div.sticky {  position: -webkit-sticky; /* Safari */  position: 
  sticky;  top: 0;  background-color: green;  
  border: 2px solid #4CAF50;}

ProgrammerAnswered 1 years ago · Answer 3

To see this (and get your example set up for future sections) first add a class of positioned to the second

in the HTML:

<p class="positioned"> ...

Now add the following rule to the bottom of your CSS:

.positioned {
  position: static;
  background: yellow;
}

Relative positioning is the first position type we'll take a look at. This is very similar to static positioning, except that once the positioned element has taken its place in the normal flow, you can then modify its final position, including making it overlap other elements on the page. Go ahead and update the position declaration in your code:

position: relative;

top, bottom, left, and right are used alongside position to specify exactly where to move the positioned element to. To try this out, add the following declarations to the .positioned rule in your CSS:

top: 30px;
left: 30px;

If you now save and refresh, you'll get a result something like this:

<h1>Relative positioning</h1>

I am a basic block level element. My adjacent block level elements sit on new lines below me.

<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.

We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.

inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="long.jpg">

ProgrammerAnswered 1 years ago · Answer 4

Microsoft Internet Explorer version 6 and older don’t support the method of specifying all four edges, but they do support the method of specifying one corner plus the dimensions.

/* This method works in IE6 */
#foo {
  position: absolute;
  top: 3em;
  left: 0;
  width: 30em;
  height: 20em;
}

/* This method doesn't work in IE6 */
#foo {
  position: absolute;
  top: 3em;
  right: 0;
  bottom: 3em;
  left: 0;
}

Copy the code below into your text editor and save the document as absolute.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Absolute Positioning</title>
     <link rel="stylesheet" type="text/css" href="absolute.css">
   </head>
   <body>
     <div id="outer">
       <div id="inner"></div>
     </div>
   </body>
 </html>

Next, copy the following code into a new file and save it as absolute.css.

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }

Save both files and load the HTML document into your browser. You will see a grey rectangle surrounded by a somewhat wider red border.

The #inner element has a specified width and height and a grey background colour. The #outer element, which is the structural parent of #inner, has a red border. It also has a 5em margin all around, to shift it away from the edges of the browser window and let us see more clearly what is going on.   Nothing surprising so far, right? The height of the #outer element is given by its child element (#inner) and the width by the horizontal margins.

Now watch what happens if you make #inner absolutely positioned! Add the following highlighted declaration to the #inner rule:

#inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   '''position: absolute;'''
 }

CSS absolute positioning of elements in page background respecting contents layout

Write an answer

Recent Questions on css

Programming Languages

CSS absolute positioning of elements in page background respecting contents layout

Write an answer

Questions related to 'CSS absolute positioning of elements in page background respecting contents layout'

Recent Questions on css

Programming Languages