Html 表格右上角的 CSS 位置图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10794939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS position icon to top right of table
提问by Richard N
I am relatively new to CSS. I have a table on my page which has a width of 70%. I need to position a small icon just above the right side of the table so that the icon is aligned with the right margin of the table below it. How can I achieve this?
我对 CSS 比较陌生。我的页面上有一个宽度为 70% 的表格。我需要在表格右侧上方放置一个小图标，以便该图标与其下方表格的右边距对齐。我怎样才能做到这一点？
So generically this question would be how to position elements relative to the position of other elements on a page using CSS?
所以一般来说，这个问题是如何使用 CSS 相对于页面上其他元素的位置来定位元素？
Thanks, Calvin
谢谢，卡尔文
采纳答案by Rohit Azad
Hi now you can do this easily throw PositionGive to Parent Position Relativeand child to give position Absoluteand do top rightaccording to your layout
嗨，现在您可以轻松地将位置给定Parent Position Relative并根据您的布局在右上角执行此child to give position Absolute操作
Live demo
现场演示
回答by Raknel
In CSS you should write:
在 CSS 中你应该这样写：
.myclass {
position:relative;
}
or
或者
<img style="position:relative;" />
then you can control position by "top", "left", "right", "bottom" statement. Example:
然后你可以通过“top”、“left”、“right”、“bottom”语句来控制位置。例子：
<img src="position: relative; top: 20px;" />
回答by jumancy
<div style="position:relative;float:left;overflow:hidden">
<table>
...
</table>
<div class="icon"></div>
</div>
.icon {
position:absolute;
width:10px;
height:10px;
top:0;
right:0;
}
if want the icon be outside the table write values with minus, for ex:
如果希望图标在表格之外，请用减号写入值，例如：
top:-10px; /* above the table */
right:-10px; /* on the right side the table */
回答by R' Zone
Give This css :
给这个css：
.classname {
position:relative;
}
i hope you problem will be solve
我希望你的问题会得到解决
回答by Kibsgaard
The guys above have answered the question, but if you want to know how it works, try looking at: http://www.tizag.com/cssT/position.php
上面的人已经回答了这个问题，但是如果您想知道它是如何工作的，请尝试查看：http: //www.tizag.com/cssT/position.php
Also you should consider using Divs instead of tables, when creating layout of the entire page: http://www.tizag.com/htmlT/htmldiv.php
在创建整个页面的布局时，您还应该考虑使用 Divs 而不是表格：http: //www.tizag.com/htmlT/htmldiv.php
