POSITIONING WITH CSS

In the normal flow, the elements are positioned starting from the top left and following one another down to the right, until they occupy all the available space. Elements spread out across the edges. One of the systems used to vary this scheme is positioning, through which, by acting on the position property, the position of an element can be varied with respect to its original position in the document and also with respect to the other elements that surround it. Another method to vary the default schema is the floating, with which you can create the columns. Floating is allowed by the float property. There are five types of positioning that can be used, through the position property to control the arrangement of the different elements on a page.

TYPES OF POSITIONING

Static;
Relative;
Absolute;
Fixed;
Sticky

You can also use the floating technique, the float property that we will see later. The elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

POSITION STATIC

HTML elements are placed static by default. These elements are not affected by the top, bottom, left, and right properties. An element with a static position is not positioned in any special way; it is always positioned according to the normal flow of the page. Static positioning as mentioned is the default that each element gets. It simply means “put the element in its normal position in the document flow”.

Copy to Clipboard

POSITION RELATIVE

A relative position element is positioned relative to its normal position. Setting the top, bottom, left, and right properties will cause it to be moved from its normal position. The other contents will not fit into the space left blank by the element. Relative positioning is the first type of position we will look at. This is very similar to static positioning, except that once the positioned element has taken its place in the normal flow of the page, you can change its final position, including overlapping other elements on the page.

Copy to Clipboard

POSITION ABSOLUTE

An element with absolute position is positioned relative to the closest positioned ancestor (rather than positioned relative to the viewport, such as fixed). However, if an absolutely positioned element has no positioned ancestors, it uses the body of the document and moves along with the page scroll. An absolutely positioned element no longer exists in the normal document flow. Instead, it sits on its own level separate from everything else. This is very useful: it means we can create isolated UI features that don’t interfere with the layout of other elements on the page. For example, pop-ups, control menus, rollover panels, UI features that can be dragged and dropped anywhere on the page, and so on. Top, Bottom left and right behave differently with absolute positioning. Rather than positioning the element based on its relative position within the normal flow of documents, they specify the distance the element should have from each side of the containing element.

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

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Posizionamento Absolute</title>
    <style type="text/css">
        .relative{position: relative; width: 800px; height: 300px;
        border: 4px solid red;}
        .absolute{position: absolute;width: 300px; height: 150px; border: 3px solid green;
            padding: 20px;top: 150px;left: 30px;}
        h1{text-align: center;background-color: coral;border: 1px solid black;}
    </style>
</head>
<body>
    <h1>POSIZIONAMENTO ASSOLUTO</h1>
    <div class="relative">

</div>
    <div class="absolute">
        Un elemento con posizione absolute è posizionato rispetto all'antenato 
        posizionato più vicino (anziché posizionato rispetto al viewport, come fisso). 
        Tuttavia, se un elemento posizionato in modo assoluto non ha antenati posizionati, 
        utilizza il corpo del documento e si sposta insieme allo scorrimento della pagina.
    </div>
    <div style="padding-bottom:2000px">

</div>
</body>
</html>

POSITION FIXED

An element with fixed position is positioned relative to the viewport, which means that it always remains in the same position even if you scroll the page. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a blank space on the page where it would normally have been placed. It works in exactly the same way as absolute positioning, with one key difference: while absolute positioning fixes an element in position relative to its closest positioned ancestor (the initial containing block if there isn’t one), fixed positioning usually fixes an element in position relative to the visible part of the window. (An exception to this occurs if one of the element’s ancestors is a fixed containing block because its transform property has a value other than none.) This means that you can create useful fixed UI elements, such as persistent navigation menus that are always visible no matter how far the page scrolls.

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Posizionamento fixed</title>
    <style type="text/css">
        .fixed{position: fixed;width: 600px; height: 100px; border: 3px solid green;
            padding: 20px;bottom: 20px;right: 60px;}
        h1{text-align: center;background-color: coral;border: 1px solid black;}
        p{font-weight: 900;}
    </style>
</head>
<body>
    <h1>POSIZIONAMENTO FIXED</h1>
    <div class="fixed">
        Un elemento con posizione fixed è posizionato rispetto al viewport, 
        il che significa che rimane sempre nella stessa posizione anche se 
        si scorre la pagina. <strong>Le proprietà top, right, bottom e left vengono 
        utilizzate per posizionare l'elemento.</strong> Un elemento fisso non lascia 
        uno spazio vuoto nella pagina in cui sarebbe stato normalmente 
        posizionato.
    </div>
    <div style="margin-bottom: 2000px;">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae, nemo. 
            Fugiat libero facilis adipisci, tenetur molestiae dolore minima 
            itaque nobis! Culpa ipsum earum laudantium qui incidunt voluptatum 
            cum aliquam dolorem.
        </p>
        <p>Ipsum nesciunt molestiae commodi distinctio, sequi beatae a, 
            doloribus explicabo quibusdam hic blanditiis ut ullam deserunt 
            iure, ab dicta illo! Odit error excepturi pariatur iste obcaecati 
            alias, vel eligendi facere!
        </p>
        <p>Omnis cupiditate hic quae dolorem aliquid cumque 
            aperiam fugit ea nam pariatur possimus, iste tenetur 
            ad nobis expedita eligendi dicta quas est consequuntur. 
            A, cupiditate? Sunt voluptatibus quidem fuga nostrum?
        </p>
        <p>Odit illum provident libero fuga assumenda accusamus 
            corrupti consequatur iste beatae in maxime sequi 
            eveniet sit nesciunt nihil mollitia, minima ea 
            rerum voluptate at voluptatum repellendus. 
            Praesentium modi impedit ullam?
        </p>
        <p>Enim, facilis officiis. Nisi repellendus, voluptate fugit cupiditate 
            sunt pariatur ex maiores repellat modi adipisci aliquam eligendi. 
            Eveniet laudantium in reprehenderit ab ea cupiditate dolor vitae.
             Provident hic deserunt possimus?
            </p>
        <p>Praesentium, dignissimos nemo. Quia aspernatur 
            commodi ab, atque nostrum quibusdam? Saepe 
            obcaecati enim placeat facilis in maiores, 
            aspernatur id nisi temporibus dicta iusto 
            ipsam eius incidunt cupiditate libero culpa. Nam.</p>

<p>In a rem doloribus dolorem veniam repellat porro 
            vel culpa suscipit consequuntur, iste quis ad 
            voluptatum architecto impedit nostrum vitae 
            voluptatibus eum recusandae sequi facere soluta maxime? 
            Accusantium, fuga illo.
        </p>
        <p>Distinctio quaerat quidem ipsa, dicta magni vero molestias? 
            Delectus nisi neque assumenda velit veritatis similique 
            consectetur voluptatum. Repudiandae, impedit id, accusamus 
            expedita amet debitis tempora, temporibus omnis corporis 
            unde eveniet.
        </p>
    </div>
</body>
</html>

POSITION STICKY

A sticky position item is positioned according to the user’s sliding position. A permanent element alternates between relative and fixed positions, depending on the sliding position. It is positioned relative until a certain offset position is satisfied in the window; hence, it “sticks” into position (like position: fixed).

Note: Internet Explorer does not support permanent placement. Safari requires a -webkit- prefix. You must also specify at least one of the top, right, bottom, or left values for permanent positioning to work.

Copy to Clipboard

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.sticky {
  position: -webkit-sticky;/*--Safari*/
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
h1{text-align: center;background-color: coral;border: 1px solid black;}
</style>
</head>
<body>
    <h1>POSIZIONAMENTO STICKY</h1>
    <p>Prova a <b>scorrere</b> all'interno di questo riquadro per capire come funziona 
       il posizionamento sticky.
    </p>
<div class="sticky">Posizionamento sticky!</div>
<div style="padding-bottom:2000px">
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque 
      et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis 
      evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
      Eum no molestiae voluptatibus.
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, 
      illum definitiones no quo, maluisset concludaturque et eum, 
      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam 
      omnis evertitur eum. Affert laboramus repudiandae nec et. 
      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
    </p>
</div>

</body>
</html>

THE DISPLAY PROPERTY

The display property is the most important CSS property for controlling the layout. This property specifies if/how an element is displayed. Each HTML element has a default display value depending on the element type which can be block or inline. A block level element always starts on a new line and occupies the entire available width (extends left and right as far as possible). An inline element does not start on a new line and only occupies the necessary width.

DISPLAY NONE

Display none is commonly used with JavaScript to hide and show elements without deleting and recreating them. The <script> element uses display: none; as default. As mentioned, each element has a default display value. However, this value can be overwritten. Changing an inline element to a block level element, or vice versa. This can be useful for giving the page a specific look and continuing to follow web standards.

Note: Setting the display property of an element only changes the display mode of the element, NOT the element type. So, in an inline element with display: block; it is not allowed to have other blocking elements inside it. You can hide an element by setting the display property to none. The element will be hidden and the page will be displayed as if the element was not present:

THE VISIBILITY PROPERTY

visibility: hidden; it also hides an element. However, the element will still take up the same space as before. The element will be hidden, but it will still affect the layout:

THE Z-INDEX PROPERTY

The z-index property specifies the stack display order of an element. When elements are placed, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of or behind the others). An element can have a positive or negative stack order.

Note: z-index only works on elements positioned absolutely, relative, fixed, sticky and flex items (which we will see later).

PROPERTY DISPLAY CODE EXAMPLE

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Hidden Element</title>
    <style type="text/css">
        h1 {text-align: center;background-color: coral;border: 1px solid black;}
        p {font-family: Arial, Helvetica, sans-serif; font-size: xx-large;
           border: 4px solid greenyellow; background-color: goldenrod;}
        li{display: inline;font-family: Arial, Helvetica, sans-serif; 
          font-size: xx-large; padding:30px}
        ::marker{
            color: red;
        }
    </style>
    <script type="rocketlazyloadscript" data-rocket-type="text/javascript">
        function mostra()
        {
            let p = document.getElementById("paragrafo");
            p.style.display="block";
        }
        function nascondi()
        {
            let p = document.getElementById("paragrafo");
            p.style.display="none";
        }
    </script>
</head>
<body>
    <h1>NASCONDERE UN ELEMENTO CON JAVASCRIPT</h1>
    <div>
        <p id="paragrafo">Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
            Voluptatum repellat porro modi numquam, ipsum ratione 
            molestias quidem, eius delectus quaerat non veritatis 
            officiis aut sint fugiat illo ex qui excepturi?
        </p>
    </div>
    <label for="radio1" >Nascondi</label>
    <input type="radio" id="radio1" title="Nascondi" name="hidden" onclick="nascondi()">
    <label for="radio2" >Mostra</label>
    <input type="radio" id="radio2" name="hidden" title="Mostra" onclick="mostra()">
    <br>
    <br>
    <h1>TRASFORMARE UN ELEMENTO BLOCK LEVEL IN ELEMENTO INLINE</h1>
    <ol>
        <li>UNO</li>
        <li>DUE</li>
        <li>TRE</li>
        <li>QUATTRO</li>
    </ol>
</body>
</html>

THE Z-INDEX PROPERTY CODE EXAMPLE

Copy to Clipboard

OVERFLOW

The overflow property controls what happens to content that is too large to fit into an area. Specifies whether to crop content or add scroll bars when the content of an element is too large to fit into the specified area.

The overflow property has the following values:

visible – Default. The overflow is not clipped. The content is displayed outside the element frame
hidden: the overflow is clipped and the rest of the content will be invisible
scroll – The overflow is clipped and a scroll bar is added to see the rest of the content
auto – Similar to scrolling, but adds scroll bars only when needed

Note: The overflow property works only for block-level elements with a specified height.

The overflow-x and overflow-y properties specify whether to change the content overflow only horizontally or vertically (or both). The overflow-wrap property specifies whether or not the browser can break lines with long words if they overflow from its container.

Copy to Clipboard

FLOAT AND CLEAR

The CSS float property specifies how an element should float.
The CSS clear property specifies which elements can float next to the cleared element and on which side.

The float property is used to position and format the content, e.g. let an image float to the left of the text in a container. The float property can have one of the following values:

left – The element floats to the left of its container
right – The element floats to the right of its container
none – The element does not float. This is the default
inherit – The element inherits the float value of its parent

When we use the float property and want the next element to be below (not to the right or left), we will need to use the clear property. The clear property specifies what should happen with the element next to a floating element.

The clear property can have one of the following values:

none – Element is not pushed under left or right float elements. This is the default
left – The element is pushed under the left float elements
right – The element is pushed under the right float elements
both – The element is pushed under the left and right float elements
inherit – The element inherits the clear value from its parent

If a floating element is higher than the containing element, it will “overflow” out of it. We can then add the clearfix property to solve this problem.

FLOAT EXAMPLE CODE

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>FLOAT</title>
<style type="text/css">
    img {float:right; width: 100px;height: 100px; margin-left: 35px;}
    p {float: right;font-family: Arial, Helvetica, sans-serif; font-size: 20px;}
    h1 {text-align: center;background-color: coral;border: 1px solid black;}
    div {
        float: left;
        padding: 15px; 
      }
      
      .div1 {
        background: red;
      }
      
      .div2 {
        background: yellow;
      }
      
      .div3 {
        background: green;
      }
</style>
</head>
<body>
    <h1>FLOAT</h1>
    <h2>Provare float left, float none e inherit </h2>
    <p><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Orange" data-lazy-src="https://www.marcoalbasini.com/myfolder/img/Orange.jpg"><noscript><img decoding="async" src="https://www.marcoalbasini.com/myfolder/img/Orange.jpg" alt="Orange"></noscript>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus 
    imperdiet, nulla et dictum interdum, nisi lorem egestas odio, 
    vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, 
    ultrices nec congue eget, auctor vitae massa. Fusce luctus 
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis 
    sed ornare eu, lobortis in odio. Praesent convallis urna a 
    lacus interdum ut hendrerit risus congue. Nunc sagittis dictum 
    nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc 
    venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus 
    gravida venenatis. Integer fringilla congue eros non fermentum. 
    Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris 
    quis diam velit.
   </p>
   <h2>Elementi DIV fluttuanti uno accanto all'altro</h2>
   <br>
   <div class="div1">Div 1</div>
   <div class="div2">Div 2</div>
   <div class="div3">Div 3</div>
</body>
</html>

CLEAR EXAMPLE CODE

Copy to Clipboard

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid green;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid green;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
.img1 {
    float: right;
  }
  
  .img2 {
    float: right;
  }
  
  .clearfix{
    overflow: auto;
    border: 3px solid #4CAF50;
    padding: 5px; 
  }
  .div5 {
    border: 3px solid #4CAF50;
    padding: 5px;
  }
h1 {text-align: center;background-color: coral;border: 1px solid black;}
</style>
</head>
<body>
<h1>CLEAR</h1>
<h2>Senza clear</h2>
<div class="div1">div1</div>
<div class="div2">div2</div>
<br>
<br>
<h2>Con clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - clear: left; sposta div4 in basso sotto il div3 float. 
                  Il valore "left" cancella gli elementi float a sinistra. 
                  Puoi anche cancellare "right" e "both (entrambi)".
</div>
<br>
<br>
<h1>CLEARFIX</h1>
<h2>Senza Clearfix</h2>
<div class="div5">
  <img decoding="async" class="img1" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20170%20170'%3E%3C/svg%3E" alt="Orange" width="170" height="170" data-lazy-src="https://www.marcoalbasini.com/myfolder/img/Orange.jpg"><noscript><img decoding="async" class="img1" src="https://www.marcoalbasini.com/myfolder/img/Orange.jpg" alt="Orange" width="170" height="170"></noscript>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Corporis eligendi quos reiciendis maiores ducimus quaerat 
    sint vel? Nisi ducimus est quo. Minima, fugit magni porro aspernatur 
    ipsam natus aliquam quis.
  </p>
</div>

<h2 style="clear:right">Con Clearfix</h2>
<p>Possiamo risolvere questo problema aggiungendo una classe clearfix 
    con overflow: auto; all'elemento contenitore:
</p>
<div class="clearfix">
  <img decoding="async" class="img2" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20170%20170'%3E%3C/svg%3E" alt="Orange" width="170" height="170" data-lazy-src="https://www.marcoalbasini.com/myfolder/img/Orange.jpg"><noscript><img decoding="async" class="img2" src="https://www.marcoalbasini.com/myfolder/img/Orange.jpg" alt="Orange" width="170" height="170"></noscript>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
   Minus perspiciatis eaque et alias voluptate, dolor totam error at 
   nobis cum repellat iusto impedit sed natus necessitatibus tempora 
   deleniti consequatur consectetur!
  </p>
</div>
</body>
</html>

EXAMPLE CODE

Copy to Clipboard

<!DOCTYPE html>
<html>
<head>
    
</head>
<body>
<div class="header">
  <h1>HEADER</h1>
</div>
<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>Menu 1</li>
      <li>Menu 2</li>
      <li>Menu 3</li>
      <li>Menu 4</li>
    </ul>
  </div>

<div class="column content">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Dolore suscipit iusto magnam dignissimos, tenetur accusantium nisi? 
        Quasi repellat temporibus quia accusantium explicabo, ducimus esse earum, 
        architecto quam, facere debitis repudiandae!
    </p>
    <p>Delectus quas vel neque dolor voluptatem a maiores doloremque enim, 
        distinctio dolorem quae, adipisci ab consequuntur error laborum 
        repellat doloribus? Nostrum, sapiente quibusdam debitis porro dolor 
        adipisci pariatur minima omnis?
    </p>
    <p>Fugiat amet, veniam cum ex deleniti eius? Officia quis 
        provident molestias quaerat, voluptas ab eaque adipisci 
        sed quia harum, nam, soluta amet nobis ipsa natus animi 
        laudantium cupiditate qui eligendi?</p>
  </div>
</div>
<div class="footer">
  <p>Contattaci al numero 3331234567</p>
</div>
</body>
</html>

Copy to Clipboard

LINKS TO PREVIOUS POST

PREVIOUS POST LINKS

LINK TO THE CODE ON GITHUB

GITHUB