+201223538180

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionLess Absolute Positioning With Trendy CSS

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System SolutionLess Absolute Positioning With Trendy CSS

Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System Resolution

Every time I work on a part that wants absolute positioning, I ask myself: is it actually crucial? I began to note a number of use-cases the place utilizing place: absolute isn’t wanted. I discovered this fascinating and I considered documenting the use-cases that I normally got here via whereas engaged on front-end tasks.

On this article, I’ll discover a number of use-cases that utilizing absolute positioning with them isn’t actually wanted.

Introduction

If we return 5 years in time, CSS flexbox was nonetheless new and might’t be used with a correct fallback. CSS grid wasn’t even supported again then. Finally, we’d use CSS positioning to realize the specified structure. Nonetheless, some of those use-cases will be solved with CSS flexbox or grid lately.

The opposite day, we have been engaged on a touchdown web page front-end growth, and my associate requested me a few structure situation she is going through. The problem was taking place due to place: absolute, so I stepped in and tried to assist with it, and we fastened it with out even utilizing any CSS positioning. At the moment, it clicked for me that I ought to doc that, and that’s what I’m doing proper now.

Use instances and Examples

Card overlay

When we have now a card that accommodates textual content over a picture, we frequently use place: absolute to put the content material over the picture. That is now not wanted with CSS grid.

It is a typical text-over-image card. Right here is the HTML:

<article class="card">
    <div class="card__thumb">
        <img src="property/mini-cheesecake.jpg" alt="">
    </div>
    <div class="card__content">
        <h2><a href="#">Title</a></h2>
        <p>Subtitle</p>
    </div>
</article>

With a view to place the content material over the picture, we have to place .card__content completely.

.card {
    place: relative;
}

.card__content {
    place: absolute;
    left: 0;
    prime: 0;
    width: 100%;
    top: 100%;
    background: linear-gradient(to prime, #000, rgba(0, 0, 0, 0) backside/100% 60% no-repeat;
    padding: 1rem;
}

There may be nothing incorrect with utilizing place: absolute within the above instance, however why not use a better resolution? Let’s discover that.

Step one is so as to add show: grid to the cardboard part. We don’t must set any columns or rows.

.card {
    place: relative;
    show: grid;
}

.card__content {
    show: flex;
    flex-direction: column;
    justify-content: flex-end;
}

By default, CSS grid will create rows mechanically based mostly on the content material. Within the card, we have now two foremost parts, and so we have now two rows of content material.

To overlap the content material with the picture, we’d like to put each of them on the primary grid space.

.card__thumb,
.card__content {
    grid-column: 1/2;
    grid-row: 1/2;
}

Even higher, we will use grid-area shorthand.

.card__thumb,
.card__content {
    grid-area: 1/2;
}

Lastly, we will additionally use grid-area: 1/-1. The -1 represents the final column and row in a grid, so it can at all times span to the tip of the column or row.

Card Tag

Based mostly on the earlier instance, we need to prolong it and embrace a tag on the prime left space of the cardboard. To do this, we have to use the identical approach which is grid-area: 1/-1, however we don’t need the tag to fill the entire card, appropriate?

To repair that, we have to inform the tag to justify and align itself to the beginning of its alignment container.

.card__tag {
    align-self: begin;
    justify-self: begin;
    /* Different kinds */
}

Meet the tag that’s positioned above its father or mother, with out utilizing place: absolute.

Demo

Hero part

One other good use case is a hero part with content material overlapping a picture.

That is much like the cardboard instance, however with totally different styling for the content material itself. Earlier than diving into the trendy means, let’s assume for a minute about how we try this with absolute positioning.

We’ve three layers:

  • Picture
  • Gradient overlay
  • Content material

There are other ways to implement that. If the picture is only for ornamental functions, we will use background-image. In any other case, we will use an <img> factor.

.hero {
    place: relative;
    min-height: 500px;
}

.hero__thumb {
    place: absolute;
    left: 0;
    prime: 0;
    width: 100%;
    top: 100%;
    object-fit: cowl;
}

/* The overlay */
.hero:after {
    content material: "";
    place: absolute;
    left: 0;
    prime: 0;
    width: 100%;
    top: 100%;
    background-color: #000;
    opacity: 0.5;
}

.hero__content {
    place: absolute;
    left: 50%;
    prime: 50%;
    z-index: 1;
    remodel: translate(-50%, -50%);
    text-align: middle;
}

That’s how we will implement the hero part utilizing absolute positioning. Nonetheless, we will do higher. Let’s discover the trendy strategy.

First, we have to add show: grid to the hero factor. After that, we are going to apply the identical idea as within the card part, which is to use grid-area: 1/-1 to each direct little one merchandise.

Sadly, we might want to use a hard and fast top for the hero part so the .hero__thumb can truly work. (A baby merchandise with top: 100% will want its father or mother to have an specific fastened top, not min-height).

.hero {
    show: grid;
    top: 500px;
}

.hero__content {
    z-index: 1; /* [1] */
    grid-area: 1/-1;
    show: flex;
    flex-direction: column;
    margin: auto; /* [2] */
    text-align: middle;
}

.hero__thumb {
    grid-area: 1/-1;
    object-fit: cowl; /* [3] */
    width: 100%;
    top: 100%;
    min-height: 0; /* [4] */
}

.hero:after {
    content material: "";
    background-color: #000;
    opacity: 0.5;
    grid-area: 1/-1;
}

I need to undergo the numbered code traces since they’re vital:

  1. We are able to use z-index on a grid or flex merchandise. No want so as to add place: relative in any respect.
  2. Because the .hero__content is a grid merchandise, utilizing margin: auto will middle it horizontally and vertically.
  3. Don’t overlook to incorporate object-fit: cowl when coping with photos.
  4. I used min-height: 0 on the hero picture simply in case a big picture was used. Effectively, that is to power CSS grid to respect the top: 100% and keep away from making the picture bigger than the hero part in case an writer used an enormous picture. You possibly can learn extra about that in my article concerning the minimal content material measurement in CSS grid.

Discover how we ended up with a a lot cleaner resolution?

Demo

CSS show: contents

I feel that is the primary real-life use case for show: contents that I discovered helpful. Contemplate the next instance the place we have now content material and a picture.

Right here is the HTML markup.

<div class="hero">
    <div class="hero__content">
        <h2><!-- Title --></h2>
        <p><!-- Desc --></p>
        <a href="#">Order now</a>
    </div>
    <img src="recipe.jpg" alt="">
</div>

Nothing bizarre until now. On cell, we need to obtain the next structure.

Discover that the picture is now inserted between the headline and outline. How one can deal with this downside? At first, you may assume that the HTML markup must be modified like that.

<div class="hero">
    <div class="hero__content">
        <h2><!-- Title --></h2>
        <img src="recipe.jpg" alt="">
        <p><!-- Desc --></p>
        <a href="#">Order now</a>
    </div>
</div>

On cell, it might probably work as anticipated. On desktop, we have to place the <img> completely on the precise facet. Whereas this works, there’s a extra easy resolution with show: contents.

Let’s get again to the preliminary markup.

<div class="hero">
    <div class="hero__content">
        <h2><!-- Title --></h2>
        <p><!-- Desc --></p>
        <a href="#">Order now</a>
    </div>
    <img src="recipe.jpg" alt="">
</div>

Discover that the content material is wrapped inside .hero__content. How we will inform the browser that we wish the <h2>, <p>, and <a> to grow to be direct siblings with the <img>? Effectively, show: contents can try this.

.hero__content {
    show: contents;
}

By including that, the .hero__content factor is a hidden ghost now. The browser will parse the markup like the next.

<div class="hero">
    <h2><!-- Title --></h2>
    <p><!-- Desc --></p>
    <a href="#">Order now</a>
    <img src="recipe.jpg" alt="">
</div>

All we have to do in CSS is the next.

.hero {
    show: flex;
    flex-direction: column;
}

.hero__content {
    show: contents;
}

.hero h2,
.hero img {
    order: -1;
}

When used proper, show: contents is a strong approach to realize issues that have been unattainable a number of years in the past.

After all, we need to deal with the desktop styling too.

@media (min-width: 750px) {
    .hero {
        flex-direction: row;
    }
    
    .hero__content {
        show: preliminary;
    }
    
    .hero h2,
    .hero img {
        order: preliminary;
    }
}

Demo

Reordering card part gadgets

On this instance, we have now a variation of a card that locations the title on the prime of the cardboard. Let’s check out the HTML markup.

<article class="card">
    <img src="thumb.jpg" alt="">
    <div class="card__content">
        <h3>Title</h3>
        <p>Description</p>
        <p>Actions</p>
    </div>
</article>

Discover that we have now two direct little one parts: the thumb and the content material. With that markup, how we will place the title <h3> on the prime?

We are able to do it with absolute positioning.

.card {
    place: relative;
    padding-top: 3rem;
    /* Accommodate for the title house */
}

.card h3 {
    place: absolute;
    left: 1rem;
    prime: 1rem;
}

Nonetheless, this resolution can fail when the title is just too lengthy.

That’s taking place as a result of the title is out of the traditional movement, so the browser doesn’t truly care about how brief or lengthy it’s. We are able to do significantly better with show: contents.

.card {
    show: flex;
    flex-direction: column;
    padding: 1rem;
}

.card__content {
    show: contents;
}

.card h3 {
    order: -1;
}

This can permit us to manage all little one gadgets and have the flexibleness of recording them as wanted with the order property.

We nonetheless have a little bit situation since we added padding: 1rem to the father or mother. The picture must be caught to the perimeters. Right here is how we will repair that.

.card img {
    width: calc(100% + 2rem);
    margin-left: -1rem;
}

Centering

In the case of centering, you will notice numerous jokes that it’s laborious and sophisticated. As of late, it’s a lot simpler than ever to middle a component.

No extra utilizing place: absolute with CSS transforms. For instance, we will use margin: auto to middle a flex merchandise each horizontally and vertically.

.card {
    show: flex;
}

.card__image {
    margin: auto;
}

I wrote a full information about centering in CSS.

A picture side ratio

The brand new CSS aspect-ratio property is now supported in all main browsers. We used to do the padding hack to power a field to respect a particular side ratio.

Right here is an instance.

.card__thumb {
  place: relative;
  padding-top: 75%;
}

.card__thumb img {
  place: absolute;
  left: 0;
  prime: 0;
  width: 100%;
  top: 100%;
  object-fit: cowl;
}

With the brand new aspect-ratio property, it’s a lot simpler.

/*  */
.card__thumb {
  place: relative;
  aspect-ratio: 4/3;
}

You possibly can be taught extra about them in this text by yours actually.

Generally, utilizing place: absolute is best

On this instance, we have now the content material (avatar, title, and hyperlink) overlapping with the cardboard cowl. We’ve two choices for implementing this:

  1. Use place: absolute for the cardboard cowl
  2. Use a detrimental margin for the content material

Let’s discover the options and see which considered one of them is extra appropriate for that use case.

Utilizing absolute positioning

With this resolution, we will place the rectangle completely, after which add padding: 1rem to the cardboard content material.

.card__cover {
    place: absolute;
    left: 0;
    prime: 0;
    width: 100%;
    top: 50px;
}

.card__content {
    padding: 1rem;
}

That means, when the cardboard cowl is eliminated, we don’t should edit or alter the CSS.

Utilizing detrimental margins

On this resolution, the cardboard gained’t be positioned completely. As a substitute, the content material may have a detrimental margin from the highest.

.card__content {
    padding: 1rem;
    margin-top: -1rem;
}

Whereas this resolution works when the cardboard cowl is there, it might probably trigger an issue when we have now a card variation with out the cardboard cowl.

Discover how the avatar is off its father or mother (The cardboard). To repair that, we have to alter the CSS and take away the detrimental margin.

.card--no-cover .card__content {
    margin-top: 0;
}

In consequence, utilizing place: absolute turned out to be a greater resolution in such a case as it can save us from writing extra CSS.

Additional studying

I hope you loved the article. Thanks for studying!

Supply hyperlink

Leave a Reply