Home > Web Front-end > CSS Tutorial > How to make a div appear at the top of the page

How to make a div appear at the top of the page

醉折花枝作酒筹
Release: 2023-01-04 09:35:58
Original
7868 people have browsed it

In CSS, you can use the "z-index" attribute to specify the stacking order of an element, with the syntax "z-index: value". The larger the value, the higher the display level; the smaller the value, the lower the display level. When the value is negative, it represents the lowest level.

How to make a div appear at the top of the page

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Golden rules for cascading elements:

  • Whoever is bigger is better: When there is an obvious cascading level indicator, such as the effective z-index attribute value , in the same stacking context field, the one with a larger stacking level value covers the smaller one

  • comes from behind: When the stacking levels of elements are consistent and the stacking order is the same, in the DOM flow The element at the back will overwrite the previous element

Example:

<div style="z-index:999"></div>
数值越大,显示级越高,当然一般也不用999, 2,3就够了
  <div id="police_computer_network" class="m_wrapper">
                    <ul>
                        <li><a href="#"   target="_blank">全国公安信息网</a></li>
                        <li><a href="#"   target="_blank">全国公安信息网</a></li>
                        <li><a href="#"   target="_blank">全国公安信息网</a></li>
                        <li><a href="#"   target="_blank">全国公安信息网</a></li>
                        <li><a href="#"   target="_blank">全国公安信息网</a></li>
                        <li><a href="#"   target="_blank">全国公安信息网</a></li>
                    </ul>
                    <div class="m_itemMain m_up">全国公安网</div>
</div>
Copy after login

How to make a div appear at the top of the page

Recommended learning:css video tutorial

The above is the detailed content of How to make a div appear at the top of the page. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template