How does html css fix the header? Does htmlcss fix the header?

How does html css fix the header? Does htmlcss fix the header?

When the position attribute is set to fixed, the position of the element is not affected by the scroll bar, but is located directly based on the window. This is the most direct method to fix the header, other ways on the Internet feel like detours. But at the same time, two problems must be solved. First, the table body will be located based on the body element instead of the header. Therefore, the table body will be moved up, causing the table body to be blocked by the header and have a shadow. Second, the wide height of the table body and the wide height of the table header are independent of each other and are no longer subject to the constraints of the Document Stream, which leads to uneven cell matching. The solution is as follows. You can set the percentage width of padding margin to solve the problem of upper and lower cell alignment. the header and table body can also be placed in their respective div. Style Sheet <style type = "text/css"> * {padding: 0px; margin: 0px;} # thead {/* fixed Header */position: fixed; /* The display level of the table header is higher than that of the table body to prevent duplicate shadows between blank rows and the table header */z-index: 2; background: # ecececff ;} # spacetr {/* blank tr is used to fill the data covered by the header */position: relative; z-index: 1 ;}. tdata {/* display the tr */position: relative; z-index: 1 ;}</style> js script $ (function () {$ ("# spacetr" ).css ("height", $ ("# thead" ..css ("height"); // set the height of the blank row to the height of the header, the distance between the blocked data and the height of the header}); jsp code: <div style = "width: 100%"> <% --  -- %> <table id =" table "border =" 1px gray solid "cellspacing =" 0 "cellpadding =" 0 "width =" 100%; "> <tr id =" thead "> <td width =" 9% "align =" center "> recruitment </td> <c: forEach items = "$ {postnames}" var = "postname"> <td valign = "bottom" align = "center" >$ {postname} </td> </c: forEach> </tr> <tr id = "spacetr"> <td width = "9%"> </td> <c: forEach items = "$ {postnames}" var = "postname"> <td> </c: forEach> </tr> <c: forEach items = "$ {shcoolsPostnumbers}" var = "schoolPostnumbers"> <tr class = "tdata"> <td width = "9%" >$ {schoolPostnumbers. key} </td> <c: forEach items = "$ {schoolPostnumbers. value} "var =" postnumber "> <td align =" center ">$ {postnumber} </td> </c: forEach> </tr> </c: forEach> </table> </div>