CSS

Position absolute in CSS

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Here example source code and output :

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 800px;
  height: 600px;
  border: 3px solid #73AD21;
} 

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

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


</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
  <div class="absolute2">This div element has position: absolute;</div>
  
</div>


</body>
</html>

Output :

Source : https://www.w3schools.com/css/css_positioning.asp

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

The output :

Source : https://www.w3schools.com/css/css_positioning.asp

What actually CSS @media Rule (example scripts)

Definition and Usage

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution

Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).

In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.

Example scripts :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: yellow;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<h1>The @media Rule</h1>

<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "yellow".</p>

</body>
</html>

Output when full Screen :

Output when minimizing browser window less 600 px :

Thanks for visiting my blog.

Source : https://www.w3schools.com/cssref/css3_pr_mediaquery.php

In The World

Tuesday, 13 June 2023

Position absolute in CSS

Positon Fixed in CSS

position: fixed;

What actually CSS @media Rule (example scripts)

Definition and Usage