Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > About how to prevent the lower div from changing when the upper div is pulled down after div is combined with jQuery drop-down_html/css_WEB-ITnose

About how to prevent the lower div from changing when the upper div is pulled down after div is combined with jQuery drop-down_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 12:21:40
Original
1066 people have browsed it

HTML jQuery 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title></title>  <style type="text/css">	* { margin:0; padding:0;}	.dl_b{margin:0; padding:15px;height:10px;background:#0099ff}	.c{width:100px;height:30px}	.panel{width:100%;height:300px;background:#8080c0}  </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body>	<div id="dlzc" class="dl_b">   登录/注册</div>	<div class="panel" id ="panel" style="display:none;">	<div id="dlpage" style="float:left">	 <form action="action"> 		<br>		<br>		<br>		<br><pre class="brush:php;toolbar:false">  		用户名：<input type="text" name="username"/><br>  		密  码：<input type="password" name="password"/><br>  		<input class="c" type="submit" value="登录" /><br>		


		  	<form action="action2" method="post">  						 用户名 ：<input type="text" name="username"><br>						密    码：<input type="password" name="password"><br>						密码确认：<input type="password" name="password1"><br>						<input class="c" type="submit" value="注册"><br>  		</form>

如何让这部分不会随上面下拉而变化。
<script> $(document).ready(function(){$("#dlzc").click(function(){ $("#panel").slideToggle("slow"); });});</script>
Copy after login


=============
The code is as above, please give me some advice on how to set it up to get what I expect. effect.


Reply to discussion (solution)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title></title>  <style type="text/css">    * { margin:0; padding:0;}    .dl_b{margin:0; padding:15px;height:10px;background:#0099ff}    .c{width:100px;height:30px}    .panel{width:100%;height:300px;background:#8080c0}  </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body>    <div id="dlzc" class="dl_b">   登录/注册</div>    <div class="panel" id ="panel" style="display:none;">    <div id="dlpage" style="float:left">     <form action="action">         <br>        <br>        <br>        <br><pre class="brush:php;toolbar:false">          用户名：<input type="text" name="username"/><br>          密  码：<input type="password" name="password"/><br>          <input class="c" type="submit" value="登录" /><br>        


              <form action="action2" method="post">                           用户名 ：<input type="text" name="username"><br>                        密    码：<input type="password" name="password"><br>                        密码确认：<input type="password" name="password1"><br>                        <input class="c" type="submit" value="注册"><br>          </form>

如何让这部分不会随上面下拉而变化。
<script> $(document).ready(function(){$("#dlzc").click(function(){ $("#panel").slideToggle("slow"); });});</script>
Copy after login
Copy after login
Copy after login



What does this mean?

Use positioning 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title></title>  <style type="text/css">    * { margin:0; padding:0;}    .dl_b{margin:0; padding:15px;height:10px;background:#0099ff}    .c{width:100px;height:30px}    .panel{width:100%;height:300px;background:#8080c0}  </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body>    <div id="dlzc" class="dl_b">   登录/注册</div>    <div class="panel" id ="panel" style="display:none;">    <div id="dlpage" style="float:left">     <form action="action">         <br>        <br>        <br>        <br><pre class="brush:php;toolbar:false">          用户名：<input type="text" name="username"/><br>          密  码：<input type="password" name="password"/><br>          <input class="c" type="submit" value="登录" /><br>        


              <form action="action2" method="post">                           用户名 ：<input type="text" name="username"><br>                        密    码：<input type="password" name="password"><br>                        密码确认：<input type="password" name="password1"><br>                        <input class="c" type="submit" value="注册"><br>          </form>

如何让这部分不会随上面下拉而变化。
<script> $(document).ready(function(){$("#dlzc").click(function(){ $("#panel").slideToggle("slow"); });});</script>
Copy after login
Copy after login
Copy after login



What does this mean?

Using positioning I have used positioning. The key is that after the above div is pulled down, the contents of the two divs overlap. Is it possible to make the drop-down div float on top of it? http://www.m1905.com/ is like the upper left corner of this website. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title></title>  <style type="text/css">    * { margin:0; padding:0;}    .dl_b{margin:0; padding:15px;height:10px;background:#0099ff}    .c{width:100px;height:30px}    .panel{width:100%;height:300px;background:#8080c0}  </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body>    <div id="dlzc" class="dl_b">   登录/注册</div>    <div class="panel" id ="panel" style="display:none;">    <div id="dlpage" style="float:left">     <form action="action">         <br>        <br>        <br>        <br><pre class="brush:php;toolbar:false">          用户名：<input type="text" name="username"/><br>          密  码：<input type="password" name="password"/><br>          <input class="c" type="submit" value="登录" /><br>        


              <form action="action2" method="post">                           用户名 ：<input type="text" name="username"><br>                        密    码：<input type="password" name="password"><br>                        密码确认：<input type="password" name="password1"><br>                        <input class="c" type="submit" value="注册"><br>          </form>

如何让这部分不会随上面下拉而变化。
<script> $(document).ready(function(){$("#dlzc").click(function(){ $("#panel").slideToggle("slow"); });});</script>
Copy after login
Copy after login
Copy after login



What does this mean?

Using positioning I have used positioning. The key is that after the above div is pulled down, the contents of the two divs overlap. Is it possible to make the drop-down div float on top of it? http://www.m1905.com/ is like the upper left corner of this website.

Your positioning is useless, right? To make the drop-down div float on top, you need to use positioning. First relative positioning, then absolute positioning. Don’t forget to add the z-index attribute there for absolute positioning. There are many related special effects online. You can also learn how to use positioning 

<!doctype html><html> <head> <meta charset="utf-8">   <title></title>  <style type="text/css">    * { margin:0; padding:0;}    .dl_b{margin:0; padding:15px;height:10px;background:#0099ff}    .c{width:100px;height:30px}    .panel{width:100%;height:300px;background:#8080c0; position:absolute; z-index:999;}  </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> <body>    <div id="dlzc" class="dl_b">   登录/注册</div>    <div style="position:relative;">    <div class="panel" id ="panel" style="display:none;">    <div id="dlpage" style="float:left">     <form action="action">         <br>        <br>        <br>        <br><pre class="brush:php;toolbar:false">          用户名：<input type="text" name="username"/><br>          密  码：<input type="password" name="password"/><br>          <input class="c" type="submit" value="登录" /><br>        


              <form action="action2" method="post">                           用户名 ：<input type="text" name="username"><br>                        密    码：<input type="password" name="password"><br>                        密码确认：<input type="password" name="password1"><br>                        <input class="c" type="submit" value="注册"><br>          </form>

如何让这部分不会随上面下拉而变化。
<script> $(document).ready(function(){$("#dlzc").click(function(){ $("#panel").slideToggle("slow"); });});</script>
Copy after login



I defined it casually and did not write standardized css for you. It is useless under IE6 because IE6 does not support the fixed attribute. If you want to support IE6, simple CSS can no longer achieve it.
Related labels：
关于div结合jQuery下拉后，如何使得下方的div不会随上面的div下拉而发生变化
source：php.cn
Previous article：Does anyone know how this kind of window is made? _html/css_WEB-ITnose Next article：Help! After the code formatting specification, there is a gap between the two TABLEs! _html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2266
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2399
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
2013
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1897
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1967
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template