我使用jQuery补充的JavaScript通过向导创建了此步骤，并且我喜欢上一步向右滑动，而新步从右侧滑入的效果。为此，我需要设置.review-item类，使其具有绝对位置。但是，当我在水平方向上串屏屏幕时，上一个和下一个按钮将遍历该步骤的内容。我阅读了其他主题，发现可以将元素定位为绝对，并将其直接父级放置在相对位置，这将允许绝对元素在其父级元素中是相对的。这似乎不起作用。正如您将在下面的视频中看到的那样，当屏幕缩小到较小尺寸时，上一个和下一个按钮与内容在同一视图中。
我该如何对内容进行这种绝对定位，但同时又相对于其他外部元素（如上一个和下一个按钮）是否有关联？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.wizardContainer{
position:relative;
display:block;
/* box-shadow: 0px 2px 5px #888888; */
float: none;
margin: 0 auto;
max-width:1021px;
min-height:600px;
}
.review-item{
display:none;
position:absolute;
}
</style>
<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript"></script> -->
<!-- <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" /> -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body style="" class="">
<div class="row">
<div class="col-md-12" style="padding: 100px;">
<div class="wizardContainer">
<div class="col-md-12" style="text-align:center;min-height:150px;">
<p class="review-item">
Bacon ipsum dolor amet sirloin ribeye turkey shank short loin t-bone doner brisket spare ribs tenderloin cow short ribs chuck meatloaf chicken. Tail filet mignon meatloaf, ribeye turducken turkey leberkas spare ribs shankle. Prosciutto andouille pork belly short loin, hamburger pork kevin ball tip capicola swine brisket chuck meatloaf. Bresaola kielbasa pastrami frankfurter shank picanha sausage meatloaf tri-tip porchetta ball tip leberkas andouille bacon.
Frankfurter pastrami pork, chicken venison spare ribs swine. Hamburger fatback ribeye, burgdoggen picanha frankfurter tongue turducken ground round capicola corned beef pork ham leberkas. Short loin frankfurter shoulder capicola kielbasa ball tip cow cupim filet mignon jerky bresaola. Meatball frankfurter filet mignon, prosciutto shankle strip steak turkey shoulder ham hock. Porchetta beef ribs alcatra, chuck shoulder pastrami biltong turducken tenderloin. Pork belly brisket burgdoggen frankfurter prosciutto jowl. Alcatra burgdoggen corned beef fatback pancetta buffalo."
</p>
<p class="review-item">
"Brisket meatball ground round ribeye, picanha doner boudin ball tip pastrami bacon chicken. Pork chop leberkas bacon, biltong frankfurter cow picanha pork belly hamburger turkey drumstick corned beef meatloaf. Beef ribs alcatra burgdoggen, jerky beef strip steak shankle."
<!-- <input id="textValue" type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> -->
</p>
<p class="review-item">
"Buffalo ham hock meatball t-bone jowl filet mignon pork belly. Leberkas venison chicken corned beef alcatra strip steak hamburger flank. Shank tri-tip short loin porchetta alcatra brisket boudin."
</p>
<p class="review-item">
"Meatloaf pork loin chuck, drumstick beef ribs tongue pork belly. Biltong filet mignon frankfurter, drumstick boudin buffalo jerky porchetta burgdoggen tail meatball pork chop cow kielbasa. Corned beef pork loin ribeye pastrami swine beef prosciutto."
</p>
</div>
</div>
<div class="col-xs-6" style="text-align:left;"><button type="button" class="btn btn-danger btn-previous">Previous</button></div>
<div class="col-xs-6" style="text-align:right;"><button type="button" class="btn btn-primary btn-next">Next</button></div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
$( document ).ready(function() {
var stepsLength = document.getElementsByClassName("review-item").length -1;
var i=0
console.log(stepsLength);
var reviewItem = $('.review-item');
$( reviewItem[0] ).css('display','block');
$(".btn-next").click(function(){
console.log(i);
console.log($("#textValue").val());
if(i>=0 && i<stepsLength){
$( reviewItem[i] ).removeClass( "animated bounceInRight" );
$( reviewItem[i] ).removeClass( "animated bounceOutRight" );
$( reviewItem[i] ).addClass( "animated bounceOutLeft" );
i++;
$( reviewItem[i] ).css('display','block');
$( reviewItem[i] ).removeClass( "animated bounceOutRight" );
$( reviewItem[i] ).addClass( "animated bounceInRight" );
}else{
alert("The End");
}
})
$(".btn-previous").click(function(){
console.log(i);
if(i>0){
$( reviewItem[i] ).removeClass( "animated bounceInRight" );
$( reviewItem[i] ).addClass( "animated bounceOutRight" );
i--;
$( reviewItem[i] ).css('display','block');
$( reviewItem[i] ).removeClass( "animated bounceOutLeft" );
$( reviewItem[i] ).addClass( "animated bounceInLeft" );
}else{
alert("You cannot go any further back");
}
})
});
// ]]></script>
</body>
</html>
答案 0 :(得分：0)
<html>
<head>
<style>
.wizardContainer {
/*position:relative;*/
display: block;
/* box-shadow: 0px 2px 5px #888888; */
float: none;
margin: 0 auto;
max-width: 1021px;
min-height: 600px;
}
.review-item {
display: none;
}
.review-item.active {
display: block !important;
}
</style>
<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript"></script> -->
<!-- <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" /> -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body style="" class="">
<div class="row">
<div class="col-md-12" style="padding: 100px;">
<div class="wizardContainer">
<div class="col-md-12" style="text-align:center;min-height:150px;">
<p class="review-item active">
Bacon ipsum dolor amet sirloin ribeye turkey shank short loin t-bone doner brisket spare ribs tenderloin cow short ribs chuck meatloaf chicken. Tail filet mignon meatloaf, ribeye turducken turkey leberkas spare ribs shankle. Prosciutto andouille pork
belly short loin, hamburger pork kevin ball tip capicola swine brisket chuck meatloaf. Bresaola kielbasa pastrami frankfurter shank picanha sausage meatloaf tri-tip porchetta ball tip leberkas andouille bacon. Frankfurter pastrami pork,
chicken venison spare ribs swine. Hamburger fatback ribeye, burgdoggen picanha frankfurter tongue turducken ground round capicola corned beef pork ham leberkas. Short loin frankfurter shoulder capicola kielbasa ball tip cow cupim filet mignon
jerky bresaola. Meatball frankfurter filet mignon, prosciutto shankle strip steak turkey shoulder ham hock. Porchetta beef ribs alcatra, chuck shoulder pastrami biltong turducken tenderloin. Pork belly brisket burgdoggen frankfurter prosciutto
jowl. Alcatra burgdoggen corned beef fatback pancetta buffalo."
</p>
<p class="review-item">
"Brisket meatball ground round ribeye, picanha doner boudin ball tip pastrami bacon chicken. Pork chop leberkas bacon, biltong frankfurter cow picanha pork belly hamburger turkey drumstick corned beef meatloaf. Beef ribs alcatra burgdoggen, jerky beef
strip steak shankle."
<!-- <input id="textValue" type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> -->
</p>
<p class="review-item">
"Buffalo ham hock meatball t-bone jowl filet mignon pork belly. Leberkas venison chicken corned beef alcatra strip steak hamburger flank. Shank tri-tip short loin porchetta alcatra brisket boudin."
</p>
<p class="review-item">
"Meatloaf pork loin chuck, drumstick beef ribs tongue pork belly. Biltong filet mignon frankfurter, drumstick boudin buffalo jerky porchetta burgdoggen tail meatball pork chop cow kielbasa. Corned beef pork loin ribeye pastrami swine beef prosciutto."
</p>
</div>
</div>
<div class="col-xs-6" style="text-align:left;"><button type="button" class="btn btn-danger btn-previous">Previous</button></div>
<div class="col-xs-6" style="text-align:right;"><button type="button" class="btn btn-primary btn-next">Next</button></div>
</div>
</div>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
var stepsLength = document.getElementsByClassName("review-item").length - 1;
var i = 0;
var reviewItem = $('.review-item');
$(".btn-next").click(function() {
if (i >= 0 && i < stepsLength) {
reviewItem.removeClass('active');
reviewItem.eq(i).addClass("active");
i++;
} else {
alert("The End");
}
})
$(".btn-previous").click(function() {
if (i > 0) {
reviewItem.removeClass('active');
reviewItem.eq(i).addClass("active");
i--;
} else {
alert("You cannot go any further back");
}
})
});
// ]]>
</script>
</body>
</html>
这是您想要的吗？我删除了动画只是为了专注于结果。