Question

我只是做了一个小jQuery测试，但这很奇怪＆＃34; css问题出现在前面。我想用一些定位的父div来约束我的dialogBox div，这样当我用jQuery打开和关闭子项时它们就不会移动。第一个问题是只是浮动或相对定位，是jQuery切换为切换兄弟做了一些奇怪的事情，他们上下动画，我认为这会让他们绝对强迫他们分享的课程。很好，所以他们在彼此崩溃，我试图通过给他们相应的左边分开他们：值让他们回到原点。地方。但他们什么都不做。我已经退回并提供了文档和浏览器开发工具，看起来由于某种原因，DOM并没有考虑到我的左边：值。并且它没有最新的firefox，chrome，IE，Opera和Safari都不了解它。左边：将值添加到已声明绝对定位的boxShell类中的值，但是当添加到相应的id时没有...请帮助：

＆＃13;

$(function() {
	
	
	$('.btn').on('click', function() {
        var boxId = $(this).attr('data-boxId');
        $('#'+boxId).toggle(1000);
    });
	
	
});

＆＃13;

* {
    margin: 0;
    padding: 0;
}

#wrapper {
    width: 1080px;
    height: 3000px;
    margin: 0 auto 0 auto;
    position: relative;
}

#boxWrapper {
	width: 620px;
	height: 350px;
	margin: 0 auto 0 auto;
	background-color: #fff;
    position: relative;
}

.boxShell {
    width: 200px;
    height: 300px;
    display: inline-block;
    position: absolute;
}

.boxShell#1 {
    left: 0px;
}

.boxShell#2 {
    left: 200px;
}

.boxShell#3 {
    left: 400px;
}

.box {
	width: 200px;
	height: 300px;
	border-radius: 20px;
	background-color: #99FFFF;
}

.boxTop {
	height: 50px;
    position: relative;
    top: 20px;
	background-color: #00FFFF;
}

.box .boxTop h1 {
    text-align: center;
    font-family: "arial", "Helvetica", "sans-serif";
	
}

#buttonWrapper {
	width: 742px;
    height: 150px;
	margin: 0 auto 0 auto;
}

.btn {
	margin: 30px;
	padding: 20px 50px;
	font-size: 30px;
	float: left;
	display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="fi">
  <head>
    <meta charset="utf-8">
    <title>jQueryTest</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/jquery-1.11.2.min.js"></script>
	<script src="js/actions.js"></script>
  </head>
  <body>
    <div id="wrapper">
		<div id="boxWrapper">
            <div class="boxShell" id="1">
                <div class="box" id="box1">
                    <div class="boxTop">
                        <h1>#box1</h1>
                    </div>
                </div>
            </div>
            <div class="boxShell" id="2">
                <div class="box" id="box2">
                    <div class="boxTop">
                        <h1>#box2</h1>
                    </div>
                </div>
            </div>
            <div class="boxShell" id="3">
                <div class="box" id="box3">
                    <div class="boxTop">
                        <h1>#box3</h1>
                    </div>
                </div>
            </div>
		</div>
		<div id="buttonWrapper">
		<button class="btn" id="btn1" data-boxId="box1">#btn1</button>
		<button class="btn" id="btn2" data-boxId="box2">#btn2</button>
		<button class="btn" id="btn3" data-boxId="box3">#btn3</button>
		</div>
    </div>
	
  </body>
</html>

＆＃13;

什么是CSS位置：绝对和相对于类和id？

0 个答案: