Как плавно переместить часть блока за границы родительского контейнера? [закрыт]

144

26 августа 2019, 10:50

Как плавно переместить блок влево за границу родительского контейнера и при этом скрыть перемещенную часть?

Answer 1

Для родителя используйте overflow: hidden, для "ребенка" есть несколько вариантов position: absolute, position: relative, margin-left.

.container { 
  width: 300px; 
  height: 100vh; 
  margin: auto; 
  padding: 180px 1rem; 
  overflow: hidden; 
  border-left: 1px solid gray; 
  border-right: 1px solid gray; 
  position: relative; 
} 
.block + .block { 
  margin-top: 20px; 
} 
 
.block { 
  width: 100%; 
  height: 150px; 
  border: 1px solid; 
} 
 
.block1 { 
  position: absolute; 
  top: 2rem; 
  left: -50%; 
  border-color: green; 
} 
 
.block2 { 
  position: relative; 
  left: -50%; 
  border-color: blue; 
} 
.block3 { 
  margin-left: -50%; 
  border-color: red; 
}

<div class="container"> 
  <div class="block block1"></div> 
  <div class="block block2"></div> 
  <div class="block block3"></div> 
  <div class="block block4"></div> 
</div>