🧭 CSS Positioning & Layout: Full Mastery Guide

📦 Section 1: Display Types (Deep Dive)

🔹 display: block

Takes 100% width of the parent by default. Stacks vertically.

Example (HTML):

<div class="block-example">This is a block element</div>
<p class="block-example">Paragraphs are block by default</p>
    

CSS:

.block-example {
  display: block;
  background-color: #e0f7fa;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #00796b;
}
    

💡 Best Practice: Use for layouts, sections, containers.

🔹 display: inline

Flows like text. Ignores width/height.

<p>This is <span class="inline-text">inline text</span> inside a paragraph.</p>

.inline-text {
  display: inline;
  background-color: yellow;
  font-weight: bold;
}
    

💡 Best Practice: Use for highlighting words, styling links.

🔹 display: inline-block

Behaves like text but supports width/height. Great for buttons, nav links.

<div class="button">Button 1</div>
<div class="button">Button 2</div>
    

.button {
  display: inline-block;
  width: 120px;
  height: 50px;
  background-color: coral;
  color: white;
  text-align: center;
  line-height: 50px;
  margin: 5px;
  border-radius: 5px;
}
    

🔹 display: none

Completely hides element. Does not take space.

<div class="hidden">You can’t see me</div>

.hidden {
  display: none;
}
    

📌 Section 2: Positioning

🔹 position: static

Default. Elements flow naturally.

<div class="static-box">Static Element</div>

.static-box {
  position: static;
  background: #ddd;
  padding: 10px;
}
    

🔹 position: relative

Moves element relative to itself.

<div class="relative-box">Relative Box</div>

.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
  background: #c5e1a5;
}
    

💡 Best Practice: Use as a parent for absolute children.

🔹 position: absolute

Removes from flow. Positioned relative to first non-static ancestor.

<div class="container">
  <div class="absolute-box">Absolute Child</div>
</div>
    

.container {
  position: relative;
  height: 200px;
  background: #f3e5f5;
}
.absolute-box {
  position: absolute;
  top: 20px;
  right: 20px;
  background: purple;
  color: white;
  padding: 10px;
}
    

🔹 position: fixed

Always stays at viewport position.

<div class="fixed-footer">I stick to bottom!</div>

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #263238;
  color: white;
  width: 100%;
  text-align: center;
  padding: 15px;
}
    

🔹 position: sticky

Acts like relative until scroll passes, then sticks.

<h2 class="sticky-header">Sticky Header</h2>

.sticky-header {
  position: sticky;
  top: 0;
  background: gold;
  padding: 10px;
}
    

🎯 Section 3: Flexbox (Expanded)

🔹 Basic Flexbox Setup

.flex-container {
  display: flex;
  height: 200px;
  background: #eee;
}
.flex-item {
  background: teal;
  color: white;
  padding: 20px;
  margin: 5px;
}
    

<div class="flex-container">
  <div class="flex-item">One</div>
  <div class="flex-item">Two</div>
  <div class="flex-item">Three</div>
</div>
    

🔹 justify-content

Aligns items horizontally.

.flex-container {
  display: flex;
  justify-content: space-between;
}
    

Values: flex-start, center, flex-end, space-between, space-around, space-evenly

🔹 align-items

Aligns items vertically.

.flex-container {
  align-items: center;
}
    

Values: stretch (default), center, flex-start, flex-end

🔹 flex-direction

Controls layout direction.

.flex-container {
  flex-direction: column;
}
    

Values: row, row-reverse, column, column-reverse

🎯 Section 4: Grid (Expanded)

🔹 Basic Grid Setup

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  background: #fafafa;
}
.grid-item {
  background: steelblue;
  color: white;
  padding: 20px;
}
    

<div class="grid-container">
  <div class="grid-item">Box 1</div>
  <div class="grid-item">Box 2</div>
  <div class="grid-item">Box 3</div>
</div>
    

🔹 grid-template-columns

grid-template-columns: 200px 1fr 2fr;

🔹 gap

gap: 20px;

🔹 grid-area

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
    

🌊 Section 5: Float & Clear

🔹 float

Moves items left or right.

.float-left {
  float: left;
  width: 40%;
  background: pink;
}
.float-right {
  float: right;
  width: 40%;
  background: lightblue;
}
    

🔹 clear

Prevents floating overlap.

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
    

💡 Best Practice: Avoid floats for layouts now—use Flexbox/Grid. Floats are best for wrapping text around images.