Shulou(Shulou.com)06/03 Report--

This article will explain in detail how Div plus CSS locates the table form of HTML. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

If there is an element div whose position attribute is set to absolute, the location of the div depends on the element in its parent element whose position value is set to relative. If none of its parent elements has a position value of relative, absolute, or fixed, then the div position will be referenced by the body position.

But for some browsers, not every element seems to follow this rule. Here is a piece of code

CSS Code copies content to the clipboard

Table {margin-left: 100px; margin-top: 50px;} td {height: 150px; width: 100px; position: relative;} td div {height: 30px; width: 50px; background-color: red; position: absolute; left: 10px; top:50px } this is a position:absolute element

Due to the small size of the div element, it is ideal that div is always in the last td, but in firefox div does not refer to td, but body.

So the compatible way to achieve this effect is to add an element in td that can apply position:relative, and the above code can be changed to

XML/HTML Code copies content to the clipboard

.header {position:relative; height:40px; background-color:#84a9cc;} .header > .header-title {margin:0 auto;line-height:40px;color:#fff;width:80px;text-align: center;font-size:14px;} .header > .header-add {background-color:# 488FD2; color:# FFFFFF; cursor: pointer; height: 20px; line-height: 20px; padding: 10px; position: absolute; rightright: 0 Text-align: center; top: 0; width: 45px;} .header > .header-search {background-color:#fff; height: 30px; line-height: 20px; position: absolute; rightright: 80px; text-align: center; top: 5px; width: 200px;} .table > .body, .table2 > .body {border: 1px solid # BCC6D0;/border-style:none solid solid solid;/background-color:#fff }. Header-search > input {border:none; border-right: 1px solid # BCC6D0; color: # 666666; font-size: 14px; height: 100%; line-height: 100%; width: 170px; float:left;}. Header-search > .search-logo {float:left;width:29px;height:30px; background:url (... /... / images/global/serachBlue.png) center no-repeat;} tbody > .tr {height:20px;line-height:20px;} th {display:inline-block;margin-right:-3px;} th + th {margin-left:-3px;} td {padding:10px 0th display: inline-block;margin-right:-3px;} td + td {margin-left:-3px } tbody > .tr:nth-child (2n+1) {background-color:#e6e5e5;} .table2 tbody > .tr:nth-child (2n+1) {background-color:#fff;} .ml30 {margin-left:30px;} .tr .checkbox {width:20px;border:1px solid # BCC6D0;height:20px;cursor:pointer;float:left;} .tr .checkbox.selected {background-color:#488FD2 } .tr .checkbox > input [type = 'checkbox'] {display:none;} table.body,table2.body {width:100%; overflow-y:auto;} .body {margin:0;} td, td div {font-size:14px;text-align: center;} .canClick {color:#2E5CB9;cursor:pointer;} .btn {background-color: # 488FD2 Color: # FFFFFF; cursor: pointer; font-size: 14px; padding: 6px 10px;} .line > .submit {float:rightright;padding:10px 25px;} .btnPush > .tagRight {background: url ("... /... / images/global/smallGotoRight.png ") no-repeat scroll center center # 9EC5EB; float: left; height: 85px; width: 8px;} .opcity5 {opacity:0.5; filter:alpha (opacity=50);} .search {background-color: # FFFFFF; height: 30px; line-height: 20px; text-align: center; width: 210px;} .search > input {border:none; border: 1px solid # BCC6D0; color: # 666666 Font-size: 14px; height: 28px; line-height: 100%; width: 170px; float:left;} .search > .search-logo {float:left;width:29px;height:30px; background:url (... /... / images/global/searchWhite.png) center no-repeat # 488FD2;} .tableRight {float:left;margin-left:20px;width: 962px;} .btnLeft {float:left;} th {font-size: 14px; font-weight: normal; line-height: 35px; height:35px;} .textl {text-align: left;} .table2 td {border-top:1px solid # BCC6D0 } .hoverTag {cursor:pointer;position: relative;} .titTag {min-width:135px;height:50px;display:none;position:absolute;} .titTag > .titTag-left, .titTag > .titTag-msg {float:rightright;} .titTag > .titTag-left {width:15px; height:100%;} .titTag > .titTag-msg {background-color:#fcffe0;min-width:119px Border:1px solid # BCC6D0;height:48px;text-align:left;} about Div plus CSS how to position HTML's table table is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.