Popup Elements

1. Content vs decorative image

There are two ways to add an image to a page — via HTML and via CSS. They are not interchangeable.

2. Background image — the basic set of properties

For decorative backgrounds (a hero banner, a header with a photo) almost always the same set is used:

.hero {
background-image: url("img/hero.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #000;
}

cover vs contain

3. position: absolute — behavior and properties

When an element is given position: absolute, it radically changes its behavior:

• Width and height are calculated from the amount of content (not 100% of the parent)
• The element becomes invisible to its siblings and to the parent element — as if it were not in the markup
• The parent does not account for the absolute element when calculating its own dimensions
• Neighboring elements take its place
• The element is placed on top of regular blocks

Controlling position: top, right, bottom, left

An absolute element is moved using four properties:

.element {
position: absolute;
top: 0;     /* 0 from the top edge */
left: 20px;  /* 20px from the left edge */
}

Stretching an absolute element

If the width is not set explicitly, but left: 0 and right: 0 are specified — the element will stretch to the full available width. The same works vertically with top: 0 and bottom: 0:

.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

4. position: relative — preserving behavior

Unlike absolute, the value position: relative does not change the standard behavior of a block:

• A block element remains block, an inline one remains inline
• The element occupies its place in the document flow, as before
• Siblings and the parent account for it in their calculations

Two main purposes of position: relative

1. Activating z-index — without position the z-index property does not work
2. Positioning context — a parent element with position: relative becomes the reference point for child elements with position: absolute

5. Positioning context (relative + absolute)

An element with position: absolute calculates its top/left/right/bottom from the nearest parent element with position: relative (or absolute, fixed).

/* Parent — the reference point */
.parent {
position: relative;
}
/* Child — positioned relative to .parent */
.child {
position: absolute;
top: 0;
right: 0;
}

The context lookup algorithm:

1. Check the immediate parent — does it have position: relative?
2. If not — check the next parent up the DOM
3. If no parent has position — positioning happens relative to the viewport

6. z-index — the stacking order

The z-index property controls which element is displayed on top of another when they overlap.

• A higher value — the element is closer to the user (on top of the others)
• Works only with elements that have position set (relative, absolute, fixed)
• Without z-index — the order is determined by the position in the HTML (an element lower in the code — higher in the stack)
• With an equal z-index — the HTML-order rule applies

/* Without z-index: the third element is on top of all */
.box-1 { position: absolute; }
.box-2 { position: absolute; }
.box-3 { position: absolute; }
/* With z-index: the first element is on top of all */
.box-1 { position: absolute; z-index: 2; }

7. The background-darkening technique (overlay)

A classic task: a background banner with darkening and white text on top. The darkening must be done via CSS, not in a graphics editor — because the image may be dynamic (changed via the CMS).

The idea

1. Create an ::after pseudo-element
2. Stretch it over the whole block via position: absolute
3. Set a semi-transparent black background via rgba()
4. Bring the text to the front via z-index

Full example

/* HTML: <section class="hero"><div class="hero__content">...</div></section> */
/* 1. Parent block */
.hero {
position: relative;         /* context for ::after */
background-image: url("img/hero.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #000;
}
/* 2. Darkening layer */
.hero::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
/* 3. Content on top of the darkening */
.hero__content {
position: relative;         /* activates z-index */
z-index: 1;                 /* above ::after */
color: #fff;
}

8. text-transform — changing the case via CSS

A heading in capital letters should be written as ordinary text in the HTML, and transformed via CSS:

.hero__title {
text-transform: uppercase;
}

9. Social-media block — the correct markup

A block with links to social networks is a list of links. The icons are decorative images, not content.

Markup

<address class="social">
<ul class="social__list">
<li class="social__item">
<a href="https://facebook.com/…" class="social__link social__link--facebook">
<span class="social__text">Facebook</span>
</a>
</li>
<li class="social__item">
<a href="https://instagram.com/…" class="social__link social__link--instagram">
<span class="social__text">Instagram</span>
</a>
</li>
<li class="social__item">
<a href="https://youtube.com/…" class="social__link social__link--youtube">
<span class="social__text">YouTube</span>
</a>
</li>
</ul>
</address>

Why exactly this way?

• <address> — a semantic tag for contact information (address, phone, social networks). Not for “Share” buttons
• Two classes on each link: a shared one (social__link) — for common styles; a unique one (social__link--facebook) — for the individual icon and color
• Text in a <span> — visually hidden, but available to screen readers and search engines

CSS — two classes

/* Common styles — same size, shape, background */
.social__link {
display: inline-block;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: #3b5998;  /* base color */
}
/* Unique styles — icon and color */
.social__link--facebook  { background-image: url("img/fb.svg"); }
.social__link--instagram {
background-image: url("img/ig.svg");
background-color: #e1306c;
}
.social__link--youtube {
background-image: url("img/yt.svg");
background-color: #ff0000;
}

10. The <address> tag — the default style

The <address> tag has a default style: font-style: italic. If you do not need italics — reset it:

address {
font-style: normal;
}

11. margin vs padding — when to use which

12. Typical use cases for position: absolute

position: absolute is not for placing the main content on a page. The main elements should be regular blocks with margin, padding, Flexbox, or Grid.

Typical use cases for absolute:

• A darkening overlay — a mask on top of the background (section 7)
• An element that protrudes beyond its own block (for example, a photo that “peeks out” from a section)
• Decorative icons — added via ::before/::after, positioned absolutely
• Badges and labels — “New”, “-20%” on the corner of a product card
• Dropdown menus — they should not shift the main content

13. Working with layouts — tools and measurement

To build markup from a layout you need to be able to measure distances, colors, and sizes. Modern tools:

The basics of working with PSD in Photoshop

• Units of measurement: in the settings set pixels (Edit → Preferences → Units & Rulers)
• Open the .psd file specifically, not .jpg/.png — only PSD has layers
• Layers: each element of the layout is a separate layer. The Layers panel is on the right
• Auto-select: the tool in the top-left corner — you click an element in the layout, and its layer is highlighted
• Guides: drag them from the ruler onto the layout for precise measurements
• Ruler tool: measures the distance between two guides with pixel precision

14. Layer types in Photoshop

15. Summary table