css divs定位错误重叠在中间

时间:2015-12-04 03:37:46

标签: html css

我不知道问题是什么!无论我尝试什么都不会工作,div只是在屏幕中间重叠。我尝试使用每种可能的显示和位置组合。 我需要div在另一个下面。

http://jsfiddle.net/s2dv6agr/

请帮助:(

 SELECT SQL_CALC_FOUND_ROWS student_id as sl,student_rollno, student_name, school_name as student_school,mark_mark,
 FIND_IN_SET( mark_mark, (
SELECT GROUP_CONCAT( mark_mark
ORDER BY mark_mark DESC ) 
FROM mark )
)            
 as student_rank FROM student  JOIN class ON student_class=class_id JOIN school ON student_school=school_id  JOIN mark ON mark_student=student_id WHERE student_status=1        LIMIT 0, 1000

4 个答案:

答案 0 :(得分:0)

假设以下HTML

<div id="container">
  <div id="container1">
    Hello
  </div>
  <div id="container2">
    Hello again
  </div>
</div>
#container {
  position: relative;
}

#container1 {
  position: relative;
  z-index: 100;
}

#container2 {
  position: relative;
  z-index: 110;
}

这将显示在彼此之下。

http://jsfiddle.net/baLz1tvo/

答案 1 :(得分:0)

删除position:absolute并在任何地方使用position:relative 使用:

  #container1{float: left}
  #container2{float:right}

答案 2 :(得分:0)

试试这个:只是示例

&#13;
&#13;
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 62.5%;
	font-family: Helvetica, sans-serif;
	background: url(images/stripe.png) repeat;
}

p {
	font-size: 1.3em;
	margin-bottom: 15px;
}

#page-wrap {
	width: 660px;
	background: white;
	padding: 20px 50px 20px 50px;
	margin: 20px auto;
	min-height: 500px;
	height: auto !important;
	height: 500px;
}

#contact-area {
	width: 600px;
	margin-top: 25px;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 371px;
	font-family: Helvetica, sans-serif;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #900;
}

#contact-area input.submit-button {
	width: 100px;
	float: right;
  margin-top:30px;
 
}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.4em;
}
&#13;
<div id="contact-area">
			
			<form method="post" action="contactengine.php">
				<label for="Name">Gaming:</label>
				<input type="text" name="Name" id="Name" />
				
				<label for="City">Sports:</label>
				<input type="text" name="City" id="City" />
	
				<label for="Email">Watching Tv:</label>
				<input type="text" name="Email" id="Email" />
				
				<label for="Email">Sleeping:</label>
				<input type="text" name="Email" id="Email" />
				
        <label for="Email">Hiking:</label>
				<input type="text" name="Email" id="Email" />
				
	
        <label for="Email">Skiing:</label>
				<input type="text" name="Email" id="Email" />
				
				<input type="submit" name="submit" value="Add my info" class="submit-button" />
			</form>
&#13;
&#13;
&#13;

答案 3 :(得分:-1)

你能否对position: absolute给出一些解释,通常如果我们使用position: absolute,一切都会转到父元素。将position: absolutetopleftrightbottom属性结合使用以对齐不同的位置。