位置重叠div [英] Position overlay div

问题描述

我在表格单元格中有一个链接，当单击链接时，我会显示一个隐藏的div.

I have a link in a table cell and when the link is clicked I show a hidden div.

目前，我使用的是位置:绝对值和z-index:10.它工作正常，但我想将其移到顶部和左侧.当我添加top:-10px和left:-10px时，div移动到窗口的位置.

Currently I use position: absolute and z-index:10. It works fine, but I would like to move it a bit to the top and left. When I add top: -10px and left: -10px, the div moves to the position of the window.

如何使其距表格单元格10像素?

How do I make it 10px off the table cell?

推荐答案

您需要使用相对位置设置父元素，然后在要定位的元素上使用绝对位置.因此，如果您希望基于表格放置它，则需要添加相对于表格的位置:(相对于表格(因为它已经相对放置了，因此不会做任何事情))和相对于叠加层的绝对位置:.绝对定位将元素从文档流中移出，而相对定位则将元素留在文档流中，这就是填充物移动的原因.原因是基于CSS的工作方式: http://www.w3schools.com/css/pr_class_position.asp

You need to set the parent element using position relative then use position absolute on the element you want to position. So if you want it to be positioned based on the table you need to add position: relative to the table (which won't do anything because it is already positioned relative) and position: absolute to the overlay. Absolute positioning takes the element out of the document flow and relative positioning leaves it in the document flow which is why stuff is being moved around. The reason for this is based off how CSS works: http://www.w3schools.com/css/pr_class_position.asp

相对元素相对于其正常位置定位，因此"left:20"会向元素的LEFT位置添加20个像素

relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

绝对元素相对于其第一个定位(非静态)祖先元素定位

absolute The element is positioned relative to its first positioned (not static) ancestor element

您可能还对固定感兴趣.

You might also be interested in fixed.

已固定，该元素相对于浏览器窗口定位

fixed The element is positioned relative to the browser window

以下是示例: http://pastehtml.com/view/av391nzsv.html

这篇关于位置重叠div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！