Css display and positioning

  DISPLAY AND POSITIONING Review: Layout Great job! In this lesson, you learned how to control the positioning of elements on a web page. Let’s review what you’ve learned so far: The  position  property allows you to specify the position of an element. When set to  relative , an element’s position is relative to its default position on the page. When set to  absolute , an element’s position is relative to its closest positioned parent element. It can be pinned to any part of the web page, but the element will still move with the rest of the document when the page is scrolled. When set to  fixed , an element’s position can be pinned to any part of the web page. The element will remain in view no matter what. When set to  sticky , an element can stick to a defined offset position when the user scrolls its parent container. The  z-index  of an element specifies how far back or how far forward an element appears on the page when it overlaps other...

  DISPLAY AND POSITIONING Clear The  float  property can also be used to float multiple elements at once. However, when multiple floated elements have different heights, it can affect their layout on the page. Specifically, elements can “bump” into each other and not allow other elements to properly move to the left or right. The  clear  property specifies how elements should behave when they bump into each other on the page. It can take on one of the following values: left —the left side of the element will not touch any other element within the same containing element. right —the right side of the element will not touch any other element within the same containing element. both —neither side of the element will touch any other element within the same containing element. none —the element can touch either side. div {    width : 200px ;    float : left ; } div .special {    clear : left ; } In the example above, all  <...

  DISPLAY AND POSITIONING Float So far, you’ve learned how to specify the exact position of an element using offset properties. If you’re simply interested in moving an element as far left or as far right as possible in the container, you can use the  float  property. The  float  property is commonly used for wrapping text around an image. Note, however, that moving elements left or right for layout purposes is better suited for tools like CSS grid and flexbox, which you’ll learn about later on. The  float  property is often set using one of the values below: left  - moves, or floats, elements as far left as possible. right  - moves elements as far right as possible. .green-section {    width : 50% ;    height : 150px ; } .orange-section {    background-color : orange ;    width : 50% ;    float : right ; } In the example above, we float the  .orange-section  element to the...

  DISPLAY AND POSITIONING Display: Inline-Block The third value for the  display  property is  inline-block . Inline-block display combines features of both inline and block elements. Inline-block elements can appear next to each other and we can specify their dimensions using the  width  and  height  properties. Images are the best example of default inline-block elements. For example, the  <div> s below will be displayed on the same line and with the specified dimensions: Let’s take a look at the code: <div class = "rectangle" >    <p> I’m a rectangle! </p> </div> <div class = "rectangle" >    <p> So am I! </p> </div> <div class = "rectangle" >    <p> Me three! </p> </div> .rectangle {    display : inline-block ;    width : 200px ;    height : 300px ; } There are three rectangular divs that ea...

  DISPLAY AND POSITIONING Display: Block Some elements are not displayed in the same line as the content around them. These are called  block-level  elements. These elements fill the entire width of the page by default, but their  width  property can also be set. Unless otherwise specified, they are the height necessary to accommodate their content. Elements that are block-level by default include all levels of heading elements ( <h1>  through  <h6> ),  <p> ,  <div>  and  <footer> . For a complete list of block level elements, visit  the MDN documentation . strong {    display : block ; } In the example above, all  <strong>  elements will be displayed on their own line, with no content directly on either side of them even though their contents may not fill the width of most computer screens.

  DISPLAY AND POSITIONING Inline Display Every HTML element has a default  display  value that dictates if it can share horizontal space with other elements. Some elements fill the entire browser from left to right regardless of the size of their content. Other elements only take up as much horizontal space as their content requires and can be directly next to other elements. In this lesson, we’ll cover three values for the  display  property:  inline ,  block , and  inline-block . The default  display  for some elements, such as  <em> ,  <strong> , and  <a> , is called  inline . Inline elements have a box that wraps tightly around their content, only taking up the amount of space necessary to display their content and not requiring a new line after each element. The height and width of these elements cannot be specified in the CSS document. For example, the text of an anchor tag ( <a> ) will, ...

  DISPLAY AND POSITIONING Z-Index When boxes on a web page have a combination of different positions, the boxes (and therefore, their content) can overlap with each other, making the content difficult to read or consume. .blue-box {    background-color : blue ; } .green-box {    background-color : green ;    position : relative ;    top : - 170px ;    left : 170px ; } In the example above, the  .green-box  element overlaps on top of the  .blue-box  element. The  z-index  property controls how far back or how far forward an element should appear on the web page when elements overlap. This can be thought of as the  depth  of elements, with deeper elements appearing behind shallower elements. The  z-index  property accepts integer values. Depending on their values, the integers instruct the browser on the order in which elements should be layered on the web page. .blue-box { ...

DISPLAY AND POSITIONING Position: Sticky Since  static  and  relative  positioned elements stay in the normal flow of the document, when a user scrolls the page (or parent element) these elements will scroll too. And since  fixed  and  absolute  positioned elements are removed from the document flow, when a user scrolls, these elements will stay at their specified offset position. The  sticky  value is another position value that keeps an element in the document flow as the user scrolls, but  sticks  to a specified position as the page is scrolled further. This is done by using the  sticky  value along with the familiar offset properties, as well as one new one. .box-bottom {    background-color : darkgreen ;    position : sticky ;    top : 240px ; } In the example above, the  .box-bottom   <div>  will remain in its relative position, and scroll as usual. When it ...

  DISPLAY AND POSITIONING Position: Fixed When an element’s position is set to  absolute , as in the last exercise, the element will scroll with the rest of the document when a user scrolls. We can  fix  an element to a specific position on the page (regardless of user scrolling) by setting its position to  fixed , and accompanying it with the familiar offset properties  top ,  bottom ,  left , and  right . .title {    position : fixed ;    top : 0px ;    left : 0px ; } In the example above, the  .title  element will remain fixed to its position no matter where the user scrolls on the page, like in the image below: This technique is often used for navigation bars on a web page.