我一直在尝试在网页上的文本/表格前显示一个DIV框。
DIV 通过按钮按下后变为可见状态,但是可见后,它会自动将文本/表格向下移动,并将 DIV 内容包含在其上方。
有人可以帮忙吗?
我一直在尝试在网页上的文本/表格前显示一个DIV框。
DIV 通过按钮按下后变为可见状态,但是可见后,它会自动将文本/表格向下移动,并将 DIV 内容包含在其上方。
有人可以帮忙吗?
您可以使用 div 的叠加索引使其显示在其他任何内容之上。将其设置为比其他元素更大的值,它将位于其他元素之上。
使用z-index
属性。请参阅指定堆栈层级:z-index属性。
详细描述堆叠上下文。
类似于 (lèi xì yú)
#divOnTop { z-index: 1000; }
<div id="divOnTop">I am on top</div>
你需要注意的是IE6。在IE6中,一些元素如
z-index只在绝对定位或相对定位元素上起作用。我会使用外部div设置为相对定位。将顶部div设置为绝对定位以将其从文档流中移除。
.wrapper {position:relative;width:500px;}
.front {
border:3px solid #c00;
background-color:#fff;
width:300px;
position:absolute;
z-index:10;
top:30px;
left:50px;
}
.behind {background-color:#ccc;}
<div class="wrapper">
<p class="front">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="behind">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<table>
<thead>
<tr>
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
<th>ddd</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
</tr>
</tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
它向下移动桌子,因为没有太多的空间,请尝试减小/增加某些元素的宽度,以便找到一些空间,而不是将桌子向下推。您也可以使用absolute
定位来将div定位在您想要的位置,例如:
<style>
#div_id
{
position:absolute;
top:100px; /* set top value */
left:100px; /* set left value */
width:100px; /* set width value */
}
</style>
如果你想见over<>s/strong>,那么你也需要提供z-index
,这样,你可以看一看:
<style>
#div_id
{
position:absolute;
z-index:999;
top:100px; /* set top value */
left:100px; /* set left value */
width:100px; /* set width value */
}
</style>
您可以在具有position:relative
的表格/ div内添加一个具有position:absolute
的div。例如,如果您希望您的覆盖层div显示在主文本div的右下角(宽度和高度可以删除):
<div style="position:relative;width:300px;height:300px;background-color:#eef">
<div style="position:absolute;bottom:0;right:0;width:100px;height:100px;background-color:#fee">
I m over you!
</div>
Your main text
</div>
2. 改变贵重风格
z-index:100;
some higher value makes sure that this element is above allposition:fixed;
this makes sure that even if scrolling is done, div在顶部并且始终可见。
I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....
I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.
selectBox.selectCSS { background: url(/Images/replacementSelectBackground.png) top left no-repeat height:auto; } I have an issue in Safari only where the image is not rendering on top ...
How do you target specifically safari in css with styles?
Ive used the following css code to align my form elements: form { position:relative; } form input { position:absolute; left:11em; } However, the textarea element is not aligned correctly with the ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...
I have defined my page footer in the css file as: #footer { position: absolute; height: 50px; text-align: center; background: #66CCCC; bottom: 0px; left: 0px; width: 100%; height: ...