Как опустить кнопку вниз блока?

95
25 ноября 2020, 13:50

Мне необходимо опустить кнопку вниз, чтобы она всегда была с отступом от низа в 100px. У меня не получается это сделать, пробовал через position:absolute; не получается. Делать через margin-top не хочу тк. с изменением размера экрана кнопка будет сьезжать. Помогите пожалуйста.

header { 
	background: url(../img/background-image.png) no-repeat; 
	background-size: 100% 100%; 
	height: 100vh; 
} 
 
.header{ 
	padding-top:50px; 
} 
.logo{ 
	font-size: 25px; 
	font-weight: 800; 
	color: #fff; 
	font-family: 'BIG JOHN'; 
	letter-spacing: 0.13em; 
} 
.logo:hover{ 
	cursor: pointer;	 
} 
.menu a{ 
	margin-left: 7px; 
	font-size: 16px; 
	color:#fff; 
	font-family: 'Open Sans'; 
	padding: 7px 9px; 
	border: 2px solid transparent; 
	transition: 0.3s; 
} 
.menu a:hover{ 
	border: 2px solid #fff; 
	border-radius: 100px; 
	color:#fff; 
	text-decoration: none; 
	transition: 1s ease; 
} 
.title h1{ 
	margin-top:35%; 
	color:#fff; 
	font-weight: 300; 
} 
.title p{ 
 
	padding-top: 30px; 
	color:#fff; 
} 
.scroll { 
	 
} 
.scroll img{ 
	display: block; 
	transition: 0.5s ease; 
} 
.scroll img:hover{ 
	transition: 0.5s ease; 
	transform: scale(1.2); 
	cursor: pointer; 
}
<header> 
		<div class="section"> 
			<div class="container"> 
				<div class="row header"> 
					<div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2 logo">BOUNCY</div> 
					<div class="col-xl-7 col-lg-7 offset-3 col-7  menu text-right"> 
						<a href="#">Hello</a> 
						<a href="#">About</a> 
						<a href="#">Services</a> 
						<a href="#">Portfolio</a> 
						<a href="#">Team</a> 
						<a href="#">Blog</a> 
						<a href="#">Contact</a> 
					</div> 
				</div> 
				<div class="row"> 
					<div class="col-lg-6  offset-lg-3 col-12 "> 
						<div class="text-center title"> 
							<h1>We Are Code Cafe</h1> 
							<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum</p> 
						</div> 
					</div> 
				</div> 
				<div class="row"> 
					<div class="col-lg-12 col-2 offset-5 text-center scroll"> 
						<img class="flowing-scroll" href="#this-is" src="img/scroll.png" alt=""> 
					</div> 
				</div> 
			</div> 
		</div> 
	</header>

Answer 1

попробуй еще раз absolute, только убери ее из <div class="row"> просто в контейнере помести

READ ALSO
Статическая линковка C++ рантайма к динамической библиотеке

Статическая линковка C++ рантайма к динамической библиотеке

Пытаюсь собрать приложение app, прилинковав его к динамической библиотеке library так, чтобы больше никаких dll для запуска appexe не требовалось...

103
Вопрос про abs и решение одной задачи на С++

Вопрос про abs и решение одной задачи на С++

Решалась задача: Шахматный король ходит по горизонтали, вертикали и диагонали, но только на 1 клеткуДаны две различные клетки шахматной доски,...

92