Original link: https://www.zhangxinxu.com/wordpress/2023/03/css-container-rule-overlap/
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10770Xin Space-Xin Life
This article is welcome to share and aggregate, there is no need to reprint the full text, respect copyright, the circle is so big, if you need it urgently, you can contact for authorization.
1. Knowing the past by reviewing the past
The classic method of overlapping elements is absolute positioning. Occasionally, negative margins are used for positioning without expansion, as everyone knows.
Then the year before last, I also introduced another method of overlapping elements, which is to use grid layout for overlapping. For details, see the article: ” Using grid layout attributes such as grid-area to easily achieve element cascading effect “, this method is very useful.
The code shows:
<figure>
<img src="11.jpg">
<figcaption>Shanghai fishing natural scenery by zhangxinxu</figcaption>
</figure>
figure {
display: inline-grid;
}
figure > img,
figure > figcaption {
/* Can also be abbreviated as grid-area: 1 / 2 */
grid-area: 1 / 1 / 2 / 2;
}
The effect is shown below, and the picture title information is displayed above the picture.
Then, recently, I discovered a new element overlapping method, and I will introduce it to everyone.
Two, the container attribute overlaps with the element
All elements with specific size shrinkage characteristics, after being set as container elements, their width dimensions will become 0.
These elements include any elements whose display calculation value is inline-*, floated elements, absolutely positioned elements, flex items, or elements whose width value is set to fit-content.
For example:
.element {
float: left;
container-type: inline-size;
}
At this point, the width occupied by .element element must be 0.
We can use this feature to achieve element overlapping effects.
It is still the graphic layout that appeared above, because the picture itself has an internal size, so even if it becomes a container container, the width will not be 0, so we can nest another layer of tags outside, so the HTML structure is Such:
<figure>
<span><img src="11.jpg"></span>
<figcaption>Shanghai fishing natural scenery by zhangxinxu</figcaption>
</figure>
At this point, the layout effect we want can be achieved through the following CSS code:
figure {
display: inline-flex;
}
figure > span {
container-type: inline-size;
}
figcaption {
width: 256px;
align-self: end;
text-align: center;
background-color: #0009;
color: #fff;
z-index: 1;
}
The achieved effect is shown in the figure below:
Seeing is believing, you can click here hard: CSS container-type element overlapping layout demo
If you want the height and width to be 0, you can try to set container-type attribute value to size :
container-type: size;
Absolute positioning overlaps, the elements are completely out of the document flow; Grid overlaps, the width and height are consistent to force the position to coincide; and container overlaps achieve the overlapping effect by setting the width to 0.
The three overlapping mechanisms are different, and they also have their own suitable scenarios. You can choose according to the actual situation.
In addition, container-type is a new CSS property, please pay attention to compatibility when using it:
3. It’s time for bullshit
The text is over, and it’s time for nonsense. Compared with technology, many people prefer to read the final thoughts, so I will talk a little more today.
The car was driving fine yesterday, but suddenly there was a loud noise, and I thought it hit the guardrail, and the car was useless.
Get out of the car and look, the body is normal, the reflector is also there, what is the situation, take a closer look, good guy, the tire is flat, the tire is blown out, the wheels are all broken, and I realized that the loud noise just now was a blown tire , Fortunately, it’s not a highway, it’s in an urban area.
Oh my god, this tire has only been changed for less than a month. All the tires of my car have been changed twice. The quality of Jimas tires is too bad, and they are expensive, 475 a piece, and they are no longer Produced, this so-called silent tire is a 
.
Later, I called a Ping An tow truck and towed it to the door of the car repair shop near my home. I went to change the tire early the next morning.
This time I couldn’t bear it anymore, so I changed the brand directly. I changed the tires from more than 470 to more than 370. I felt beautiful in an instant. I should have done this a few years ago.
I’m going to work with new tires tomorrow, I hope these two tires can last until I sell the car.
If it breaks down in less than half a year, it may be my own problem. It is because of fishing all day and driving too much in complicated road conditions outdoors?
Whatever it is.
This article is an original article, welcome to share, do not reprint the full text, if you really like it, you can bookmark it, it will never expire, and will update knowledge points and correct errors in time, and the reading experience will be better.
Address of this article: https://www.zhangxinxu.com/wordpress/?p=10770
(End of this article)
This article is transferred from: https://www.zhangxinxu.com/wordpress/2023/03/css-container-rule-overlap/
This site is only for collection, and the copyright belongs to the original author.