7.1 CSS Positioning & Display Properties

Lesson 3: CSS Positioning & Display Properties

  1. CSS Display Property

  • Block Elements: Block elements (e.g., <div>, <p>, <h1>) take up the full width available and always start on a new line.

    div {
  display: block;
}

Here are the block-level elements in HTML:

// Block Elements

<address> <article> <aside> <blockquote>  <canvas>  <dd> <div> <dl> <dt>
<fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr>
<li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

  • Inline Elements: Inline elements (e.g., <span>, <a>) only take up as much width as their content and do not start on a new line.

    span {
  display: inline;
}

  • Inline-Block Elements: Inline-block elements are like inline elements but allow setting width and height, and they don’t force new lines.

    .inline-block {
  display: inline-block;
}

Here are the inline elements in HTML:

// Inline Elements
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i>
<img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> 
<small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

  • Controlling Visibility with display: none;: The display: none; property hides an element and removes it from the document flow, making it as if the element never existed.

    .hidden {
  display: none;
}

The display property specifies the display behavior (the type of rendering box) of an element.

// Display Property
<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: red;
      }

      p.ex1 {
        display: none;
      }
      p.ex2 {
        display: inline;
      }
      p.ex3 {
        display: block;
      }
      p.ex4 {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h1>The display Property</h1>

    <h2>display: none:</h2>
    <div>
      display none....
      <p class="ex1">HELLO WORLD!</p>
      hidden....
    </div>

    <h2>display: inline:</h2>
    <div>
      display inline....
      <p class="ex2">HELLO WORLD!</p>
      inlined....
    </div>

    <h2>display: block:</h2>
    <div>
      display block....
      <p class="ex3">HELLO WORLD!</p>
      blocked....
    </div>

    <h2>display: inline-block:</h2>
    <div>
      display inline-block....
      <p class="ex4">HELLO WORLD!</p>
      inline-blocked.inline-blocked.inline-blocked.inline-blocked.inline-blocked...
    </div>
  </body>
</html>

  1. CSS Positioning

CSS positioning allows you to precisely control the placement of elements on a web page. It's a powerful tool to create complex layouts and visual effects. There are five main positioning methods:

There are five different position values:

  • Static Positioning(default): Default position; elements are placed in the normal document flow without any special positioning. You can't move elements out of their normal flow using static positioning.

    .static-elment {
  position: static;
  background-color: lightblue;
  width: 200px;
  height: 100px;
}

  • Relative Positioning: Elements are positioned relative to their normal position. This is useful for slight adjustments. You can use top, bottom, left, and right properties to shift the element.

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
  border: 3px solid #73AD21;
}

  • Absolute Positioning: Elements are removed from the document flow and positioned relative to the nearest positioned ancestor (relative, absolute, or fixed) or the viewport. You can use top, bottom, left, and right properties to position the element.

    .absolute-container {
  position: relative; /* Necessary for absolute positioning */
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

.absolute-element {
  position: absolute;
  background-color: pink;
  width: 150px;
  height: 100px;
  top: 20px;
  right: 20px;
}

  • Fixed Positioning: Elements are positioned relative to the browser window(the viewport), and they remain in place even when the page is scrolled.

    .fixed-element {
  position: fixed;
  bottom: 0;
  right: 0;
  border: 3px solid #73AD21;
}

  • Sticky Positioning: A hybrid of relative and fixed positioning. Elements become fixed when the user scrolls past them. Note: You must specify at least one of top, right, bottom or left for sticky positioning to work.

    .sticky-element {
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Example for Sticky Positioning

// Sticky Positioning
<!DOCTYPE html>
<html>
  <head>
    <style>
      div.sticky {
        position: sticky;
        top: 0;
        padding: 5px;
        background-color: #cae8ca;
        border: 2px solid #4caf50;
      }
    </style>
  </head>
  <body>
    <p>
      Try to <b>scroll</b> inside this frame to understand how sticky
      positioning works.
    </p>

    <div class="sticky">I am sticky!</div>

    <div style="padding-bottom: 2000px">
      <p>
        The position property specifies the type of positioning method used for
        an element. There are five different position values:
      </p>
      <p>
        In this example, the sticky element sticks to the top of the page (top:
        0), when you reach its scroll position.
      </p>
      <p>Scroll back up to remove the stickyness.</p>
      <p>
        Some text to enable scrolling.. A hybrid of relative and fixed
        positioning. Elements become fixed when the user scrolls past them.
        Note: You must specify at least one of top, right, bottom or left for
        sticky positioning to work.
      </p>
      <p>
        Some text to enable scrolling.. The z-index property controls the
        stacking order of positioned elements. Elements with a higher z-index
        will appear in front of those with a lower one.
      </p>
    </div>
  </body>
</html>

  • Z-index & Layering

  • The z-index property controls the stacking order of positioned elements. t determines which element appears on top of others when they overlap. Elements with a higher z-index will appear in front of those with a lower one.

  • How it Works:

    • Positive Values: Higher values bring elements to the front.

    • Negative Values: Lower values send elements to the back.

    • Default Value: 0.

    .element {
  position: relative;
  z-index: 10;
}

  • Layering Example: You can use z-index to stack elements on top of each other. Set the z-index for an image, so that it is displayed behind the text:

    img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
.element1 {
  position: relative;
  z-index: 1;
}
.element2 {
  position: relative;
  z-index: 2; /* This element will be on top */
}

Note: Since Element 2 has the highest z-index, it will appear on top of the other two elements. Element 2 will be above <img> Element, and so on.

  1. CSS Layout - Float & Clear

Float and Clear are two CSS properties used to control the layout of elements on a web page. They are particularly useful for creating layouts where elements wrap around one another.

  • Float Property: The float property is used to align elements to the left or right, allowing text or other inline elements to wrap around it. The float property is used for positioning and formatting content e.g. let an image float left to 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 (will be displayed just where it occurs in the text). This is default

    • inherit - The element inherits the float value of its parent

.float-left {
  float: left;
}
.float-right {
  float: right;
}
// HTML snippet for float property
<div class="container">
  <div class="float-left">Float Left</div>
  <div class="normal-text">This text will wrap around the floated element.</div>
</div>
// CSS snippet for float positioning property
.container {
  width: 300px;
  border: 1px solid black;
}

.float-left {
  float: left;
  width: 150px;
  background-color: lightblue;
}

  • Clear Property: The clear property prevents elements from floating beside a specific element. It's often used to clear floats and return the flow of elements to the next line. In other words, when we use the float property, and we want the next element below (not on right or left), we will have to use the clear property.

    The clear property can have one of the following values:

    • none - The element is not pushed below left or right floated elements. This is default

    • left - The element is pushed below left floated elements

    • right - The element is pushed below right floated elements

    • both - The element is pushed below both left and right floated elements

    • inherit - The element inherits the clear value from its parent

    .clear-both {
  clear: both;
}

Example for CSS Clear

// HTML code snippet for Clear property
<!DOCTYPE html>
<html>
  <head>
    <style>
      .div1 {
        float: left;
        padding: 10px;
        border: 3px solid #73ad21;
      }

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

      .div3 {
        float: left;
        padding: 10px;
        border: 3px solid #73ad21;
      }

      .div4 {
        padding: 10px;
        border: 3px solid red;
        clear: left;
      }
    </style>
  </head>
  <body>
    <h2>Without clear</h2>
    <div class="div1">div1</div>
    <div class="div2">
      div2 - Notice that div2 is after div1 with float left in the HTML code.
      However, since div1 floats to the left, the text in div2 flows around
      div1, because it is not cleared.
    </div>
    <br /><br />

    <h2>With clear</h2>
    <div class="div3">div3</div>
    <div class="div4">
      div4 - Here,css is set to clear: left; moves div4 down below the floating
      div3. The value "left" clears elements floated to the left. You can also
      clear "right" and "both".
    </div>
  </body>
</html>

  • Basic Layout with Float: While floats were widely used in the past, modern CSS layout techniques like Flexbox and Grid offer more flexible and powerful ways to create complex layouts.

    .column {
  float: left;
  width: 50%;
}
PreviousLecture_7_CSS Positioning & Display PropertiesNext7.2 Student Activity

Last updated