.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; /* Добавляем многоточие */
}
.map{
bacokround: url("./img/map/cleanMap.png");
background-position: 100px 100px
}
document.querySelector('.buy').addEventListener('click', (e)=>{
if(e.target){
document.querySelector('.login-content-signin').style.opacity="0"
document.querySelector('.login-content-signin').style.zIndex="-1"
document.querySelector('.login-content-signup').style.opacity="1"
document.querySelector('.login-content-signup').style.zIndex="1"
}
})
document.querySelector('.hi').addEventListener('click', (e)=>{
if(e.target){
document.querySelector('.login-content-signin').style.opacity="1"
document.querySelector('.login-content-signin').style.zIndex="1"
document.querySelector('.login-content-signup').style.opacity="0"
document.querySelector('.login-content-signup').style.zIndex="-1"
}
})
<button ng-click="showSignIn=false" class="hi">Login</button>
<button ng-click="showSignIn=true" class="buy">Sign Up</button>