.parent {
width: 100px;
height: 100px;
background: green;
position: relative;
overflow: hidden;
}
.child {
position: relative;
z-index: -1;
}
.child:before {
content: "";
position: absolute;
background: red;
width: 50px;
height: 50px;
top: 60px;
left: 60px;
z-index: 10;
}<p class="clip">Магнитное поле ничтожно гасит большой круг небесной сферы,
в таком случае эксцентриситеты и наклоны орбит возрастают.</p>p.clip {
white-space: nowrap; /* Запрещаем перенос строк */
overflow: hidden; /* Обрезаем все, что не помещается в область */
text-overflow: ellipsis; /* Добавляем многоточие */
}<img src="https://m.buro247.ru/images/senina/SpongeBob_stock_art.jpg.webp" alt="" class="hi">
<img src="https://m.buro247.ru/images/senina/SpongeBob_stock_art.jpg.webp" alt="" class="g">
<img src="https://m.buro247.ru/images/senina/SpongeBob_stock_art.jpg.webp" alt="" class="hi">.hi{
width:200px;
height: 200px;
border: 1px solid red;
}
.g{
width:100px;
height: 200px;
border: 1px solid red;
}document.querySelectorAll('img').forEach((item)=>{
if(item.offsetWidth == 200){
item.setAttribute("onclick", "func")
}
console.log(item)
}).map{
bacokround: url("./img/map/cleanMap.png");
background-position: 100px 100px
}