我有一个箭头，它是视频顶部的书签链接。如何定位到视频的底部，而不是顶部？箭头div有位置：绝对，而主容器有相对位置。使用填充/边距会导致溢出。我该如何解决？
/*NAVIGATION-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#navbarul{
width: 20%;
margin: auto;
display: block;
}
#navbar{
display: block;
font-family: "Abel", sans sans-serif;
text-transform: uppercase;
font-size: 2em;
cursor: pointer;
display: inline-block;
text-align: center;
}
#mynavigation{
color: #864cfe;
height:6% ;
}
@media only screen and (max-width : 768px) { #mynavigation{
height:15% ;
}
}
/*IFRAMES--------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
iframe.video_1{
width: 100%;
height: 100%;
margin-top: 3%;
padding: 0;
}
#ifranme_container{
width: 100%;
height: 100%;
position: relative;
}
#scroll-arrow{
position: absolute;
}
#scroll-img{
width: 70%;
height: 70%;
display: inline-block;
margin: 0 auto;
}
#arowwrap{
text-align: center;
pointer-events: absolute;
margin: 100px;
z-index: 25;
}
/*PARAGRAPHS-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.the_idea p{
margin-left: 28%;
}
.the_creative p{
margin-right: 28%;
}
/*BODY, DIVS-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#mybody{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#rowfirst{
padding: 0;
margin: 0;
}<!DOCTYPE html>
<html lang="EN-us">
<head>
<title> Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="CSS/pages.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).on('click', 'a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 1000);
});
</script>
</head>
<body id="mybody">
<div id="rowfirst" class="container-fluid">
<div id="ifranme_container" class="embed-responsive embed-responsive-16by9">
<iframe class="video_1" src="https://player.vimeo.com/video/195665241"></iframe>
<div id="arowwrap"> <a id="scroll-arrow" href="#scroll"><img class="img-responsive center-block" id="scroll-img" src="img/arrow.png"></a></div>
</div>
<div id="scroll" class="col-lg-6 the_idea">
<p>We collaborated with 180 LA to create an installation piece using HP’s versatile Pavilion X2 laptops; in order to showcase the submissions and bring fan generated content to the forefront of the red carpet premiere event.
180 LA hosted an online microsite to gather fan submitted light side and dark side theme renditions. Select entries were chosen and the user generated content was displayed on the HP Pavilion X2 computers. The result was an immersive moment that connected celebrities to the fans by giving them a chance to view the videos and experience the custom soundtracks synched in unison.
</p>
</div>
<div class="col-lg-6 the_creative">
<p>As an extension of HP’s larger “Keep Reinventing” campaign, HP partnered with Disney to create the “Sound Wars" experience for the global premiere of Star Wars™: The Force Awakens.
HP challenged Grammy nominated producer DJ Snake and Vine Star Rudy Mancuso to reinvent the music of Star Wars™: The Force Awakens in a whole new way. The video acted as inspiration and invited fans to record themselves recreating the sounds of two iconic Star Wars themes in their own way, for a chance to have their video featured on screen and on the red carpet using #awakenyourforce.
</p>
</div>
<nav id="mynavigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div id="headernav" class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Portfolio</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<div id="navbarul">
<ul class=" nav navbar-nav">
<li id=webli><a id="navbar">Web</a></li>
<li id="videoli"><a id="navbar">Video</a></li>
<li id="photoli"><a id="navbar">Photo</a></li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>
答案 0 :(得分：1)
对于底部定位，请使用position和bottom属性。
#arowwrap{
width: 100%;
text-align: center;
margin: 100px auto;
z-index: 25;
position: absolute;
bottom: 0;
}
答案 1 :(得分：0)
如果我理解正确，你想要的是这样的：
#arowwrap{
position: absolute; /* You had pointer-events */
bottom: 20px; /* put the container to the bottom */
left: 0; /* Left and Right at 0 will center it */
right: 0;
margin: 0 auto; /* May or may not need this */
text-align: center; /* center it if you're using images or text */
height: 40px; /* Just to see it */
width: 40px; /* Just to see it */
}
Here is a codepen I made with your code, trying to understand the issue.