Anchor elements together with 4 lines of CSS!

[aniakubow]

Anchor elements together with 4 lines of CSS!
Anchoring element such as the ones that show up here is now so super easy. All you need to do is create two elements, so this button, and this div, and once you have styled them, add the anchor-name: css property to the primary one, with dash dash and a name of your choice, then to the secondary one, add the position-anchor: property with the same dash dash name, as well as position it, and then you can use the top or bottom property to align the secondary time to the primary one vertically, and use left or right, to align horizontally. Easy! You can then turn this into a popover and style int further if you wish. Save this for later. Check out current compatibly below.

—HTML—
<button>
<p>😊</p>
</button>

<div>
<p>This icon indicates a good experience at our airbnb.</p>
</div>


— CSS —

button {
anchor-name: --myAnchor;
background-color: rgb(136, 42, 224);
width: 150px;
height: 150px;
border-radius: 50%;
font-size: 100px;
border: none;
}

div {
position: fixed;
position-anchor: --myAnchor;
top: anchor(50%);
left: anchor(110%);
background-color: rgb(179, 147, 208);
width: 100px;
border-radius: 10px;
text-align: center;
padding: 5px;
font-family: sans-serif;
border: none;
}

Compatible with with chrome, edge and opera.

#100daysofcode #csstips #devcommunity #websitebuild #webdev

[aidenadkisson]

I wish i could understand css, I can do this is javascript and make a UI from scratch with c++ ; css just bewilders me 😅. Bravo though, this is very concise and compact!

[GeekOverdose]

CSS is like a rotten cake, new layers keep getting added the old outdated ones are there to cause undefined behavior :)