[英]Place one div on top of the other div using CSS
I have a sign in button as shown below and when I try to click that the menu opens in which I am having an ASP.Net login control which is shown below my slider and not above it.So I would like to position it on top of my slider.And between my slider and sign in button I have menu bar. 我有一个如下所示的登录按钮,当我尝试单击该菜单时,打开一个菜单,其中有一个ASP.Net登录控件,该控件显示在滑块下方而不是滑块上方,因此我想将其放在顶部滑块和登录按钮之间,我有菜单栏。
So how do I do that? 那我该怎么做呢?
I have followed this question on SO but did not succeed 我在SO上关注了这个问题 ,但没有成功
This is my CSS: 这是我的CSS:
#container {
width:780px;
margin:0 auto;
position: relative;
}
#topnavsignin {
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
margin-top:-60px;
margin-left:120px;
}
#topnavsignin a.signin {
background:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url('../images/signin-nav-bg-ie.png') no-repeat 0 0;
*padding:4px 12px 6px;
margin-left:420px;
}
#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
display:none;
background-color:#ddeef6;
position:absolute;
width:350px;
z-index:100;
border:1px transparent;
text-align:left;
top: 24.5px;
right: 171px;
margin-top:-55px;
margin-right: 0px;
*margin-right: -1px;
color:#789;
font-size:11px;
padding: 5px;
}
This is how I'm showing it: 这是我显示的方式:
<div id="container">
<fieldset id="signin_menu">
//Asp.Net Login Control
</fieldset>
</div>
//Here goes my Navigation menu //这里是我的导航菜单
This is my slider part 这是我的滑块部分
<div id="slider_wrap">
<div id="wowslider-container1">
</div>
</div>
To position one Div over the other you use the z-index
on the css, together with position: absolute or relative or fixed
要将一个Div放置在另一个Div上,请在CSS上使用
z-index
以及position: absolute or relative or fixed
Some examples: 一些例子:
http://www.w3schools.com/cssref/pr_pos_z-index.asp http://www.w3schools.com/cssref/pr_pos_z-index.asp
http://www.w3schools.com/css/css_positioning.asp http://www.w3schools.com/css/css_positioning.asp
On the container that you like to be front set a bigger z-index than the containers that you like to be on back. 在要放在前面的容器上,设置一个比要放在后面的容器更大的z索引。
Note that: the z-index
works only for position: absolute, relative, or fixed
, and the divs that you like to control have this attributes. 请注意:
z-index
仅适用于position: absolute, relative, or fixed
,并且您要控制的div具有此属性。 The example that you mention try to fix order of divs with out having one of this attributes (or with out using the z-index), so in example can not use z-index and its a tricky how to place one in front of other with out the z-index enabled. 您提到的示例尝试在不具有此属性之一的情况下(或在不使用z-index的情况下)修复div的顺序,因此在示例中,不能使用z-index及其棘手的方法未启用z-index。
As I see you do not have set index in one of them. 如我所见,您没有在其中之一设置索引。
On the container that you like to be front set a bigger z-index
than the containers that you like to be on back. 在要放在前面的容器上,设置一个比要放在后面的容器更大的
z-index
。
Note that: the z-index
works only with position: absolute/relative/fixed;
请注意:
z-index
仅适用于以下position: absolute/relative/fixed;
on the same element. 在同一元素上。 The example that you mention try to fix order of divs without having one of this properties (or without using
z-index
); 您提到的示例尝试在不具有此属性之一(或不使用
z-index
)的情况下修复div的顺序。 it is not possible to place one element in front of other without defining z-index
together with position
. 如果不与
position
一起定义z-index
,则不可能将一个元素放在另一个元素的前面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.