How to overlay one div over another div with CSS?

Sometimes, we want to overlay one div over another div with CSS.

In this article, we’ll look at how to overlay one div over another div with CSS.

How to overlay one div over another div with CSS?

To overlay one div over another div with CSS, we use relative or absolute positioning.

For instance, we write

<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="https://picsum.photos/30/30" height="20" width="32" />b
  </div>
</div>

to add divs with an image inside.

Then we write

#container {
  width: 100px;
  height: 100px;
  position: relative;
}

#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#infoi {
  z-index: 10;
}

to make the divs with IDs navi and infoi overlay the container with position: absolute;.

We put the image above the rest of the elements with z-index: 10;.

Conclusion

To overlay one div over another div with CSS, we use relative or absolute positioning.

How to remove the space between inline/inline-block elements with CSS?

Sometimes, we want to remove the space between inline/inline-block elements with CSS.

In this article, we’ll look at how to remove the space between inline/inline-block elements with CSS.

How to remove the space between inline/inline-block elements with CSS?

To remove the space between inline/inline-block elements with CSS, we use flexbox.

For instance, we write

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

to add some elements.

Then we write

p {
  display: flex;
}

to make the p element a flex container with display: flex;.

Now the spans won’t have gaps between them.

Conclusion

To remove the space between inline/inline-block elements with CSS, we use flexbox.

How to make Twitter Bootstrap menu dropdown on hover rather than click with CSS?

Sometimes, we want to make Twitter Bootstrap menu dropdown on hover rather than click with CSS.

In this article, we’ll look at how to make Twitter Bootstrap menu dropdown on hover rather than click with CSS.

How to make Twitter Bootstrap menu dropdown on hover rather than click with CSS?

To make Twitter Bootstrap menu dropdown on hover rather than click with CSS, we make the drop down items block elements.

For instance, we write

ul.nav li.dropdown:hover ul.dropdown-menu {
  display: block;
}

to make the ul and li elements block elements to make the menu show on hover.

Conclusion

To make Twitter Bootstrap menu dropdown on hover rather than click with CSS, we make the drop down items block elements.

How to set distance between flexbox items with CSS?

Sometimes, we wqant to set distance between flexbox items with CSS.

In thios article, we’ll look at how to set distance between flexbox items with CSS.

How to set distance between flexbox items with CSS?

To set distance between flexbox items with CSS, we use the gap, row-gap, or column-gap properties.

For instance, we write

#box {
  display: flex;
  gap: 10px;
}

to sety the vertical and horizontal gap between elements in the element with ID box with gap: 10px;.

We set the horizontal gap only with row-gap by writing

#box {
  display: flex;
  row-gap: 10px;
}

And we set the horizontal gap only with row-gap by writing

#box {
  display: flex;
  column-gap: 10px;
}

Conclusion

To set distance between flexbox items with CSS, we use the gap, row-gap, or column-gap properties.

How to maintain the aspect ratio of a div with CSS?

Sometimes, we want to maintain the aspect ratio of a div with CSS.

In this article, we’ll look at how to maintain the aspect ratio of a div with CSS.

How to maintain the aspect ratio of a div with CSS?

To maintain the aspect ratio of a div with CSS, we use the aspect-ratio property.

For instance, we write

<div>aspect-ratio: 1 / 1;</div>

to add a div.

Then we write

div {
  background: teal;
  width: 50%;
  aspect-ratio: 1 / 1;
}

to set the aspect ratio of the div to 1:1 with aspect-ratio: 1 / 1;.

Conclusion

To maintain the aspect ratio of a div with CSS, we use the aspect-ratio property.

How to align content of a div to the bottom with CSS?

Sometimes, we want to align content of a div to the bottom with CSS.

In this article, we’ll look at how to align content of a div to the bottom with CSS.

How to align content of a div to the bottom with CSS?

To align content of a div to the bottom with CSS, we use flexbox.

For instance, we write

div.parent {
  display: flex;
  height: 100%;
}

span.child {
  display: inline-block;
  align-self: flex-end;
}

to make the parent div a flex container with display: flex;.

And we align the child span at the bottom of the div with align-self: flex-end;.

Conclusion

To align content of a div to the bottom with CSS, we use flexbox.

How to combine a background-image and CSS3 gradient on the same element?

Sometimes, we want to combine a background-image and CSS3 gradient on the same element.

In this article, we’ll look at how to combine a background-image and CSS3 gradient on the same element.

How to combine a background-image and CSS3 gradient on the same element?

To combine a background-image and CSS3 gradient on the same element, we use the background property.

For instance, we write

body {
  background: url("IMAGE_URL") no-repeat left top,
    linear-gradient(#eb01a5, #d13531);
}

to set the background property to the background imae URL with url("IMAGE_URL").

And we add the gradient with linear-gradient(#eb01a5, #d13531).

Conclusion

To combine a background-image and CSS3 gradient on the same element, we use the background property.

How to center an absolutely positioned element in a div with CSS?

Sometimes, we want to center an absolutely positioned element in a div with CSS.

In this article, we’ll look at how to center an absolutely positioned element in a div with CSS.

How to center an absolutely positioned element in a div with CSS?

To center an absolutely positioned element in a div with CSS, we use flexbox.

For instance, we write

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

to make the div a flex container with display: flex;.

We vertically center its content with align-items: center;.

And we horizontally center its content with justify-content: center;.

Conclusion

To center an absolutely positioned element in a div with CSS, we use flexbox.

How to vertically align text in a div with CSS?

Sometimes, we want to vertically align text in a div with CSS.

In this article, we’ll look at how to vertically align text in a div with CSS.

How to vertically align text in a div with CSS?

To vertically align text in a div with CSS, we use flexbox.

For instance, we write

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

to add some elements.

Then we write

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

to make the li elements flex containers with display: flex;.

And then we set the flex direction to vertical with flex-direction: column;.

We vertically center content with justify-content: center;.

And we horizontally center content with align-content: center;

Conclusion

To vertically align text in a div with CSS, we use flexbox.

How to style a select dropdown with only CSS?

Sometimes, we want to style a select dropdown with only CSS.

In this article, we’ll look at how to style a select dropdown with only CSS.

How to style a select dropdown with only CSS?

To style a select dropdown with only CSS, we set the appearance property.

For instance, we write

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(...);
}

to set appearance to none to remove the default select arrow.

Then we set the background-image property to add our own arrow.

Conclusion

To style a select dropdown with only CSS, we set the appearance property.