Explanation of the specific method of fixing div at the top or bottom of the page using css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Explanation of the specific method of fixing div at the top or bottom of the page using css

藏色散人

Sep 04, 2018 am 10:54 AM

When we are laying out the web interface, we will occasionally generate new needs from time to time, and then new problems will arise according to the needs we want to achieve. If you are a front-end developer with senior experience and capabilities, the problems caused by simple front-end page design should not be a problem. But if you are a newbie, it can be a bit difficult. For example, we need to achieve the effect of fixing a certain div at the top or bottom of the page on the homepage of the page. How to achieve this using CSS?

This article will give you a detailed introduction on how to use css style to fix the div at the top, or set the div to be fixed at the bottom.

Let’s introduce it in detail through specific code examples

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css固定div示例</title>
    <style>
        .demo{
           margin-top: 100px;}
       .demo1{position: fixed;
           top: 10px; left:0px; bottom:0px; width:100%; height: 50px;background-color: #acffcb;z-index:999;}
        .demo2{ position:fixed; left:0px; bottom:0px;  width:100%; height: 50px; background-color: #4cedef; z-index:999;}
    </style>
</head>
<body>
<div class="demo">
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
    <p>此页面有一个div分别固定在底部和顶部！你可以移动滚动条看看是否固定！</p>
</div>
<div class="demo1">固定在顶部</div>
<div class="demo2">固定在底部</div>
</body>
</html>

The above code is accessed through the browser, and the effect is as follows:

Explanation of the specific method of fixing div at the top or bottom of the page using css

Through the screenshot, we see that there are two div blocks displayed at the top and bottom of the page. I'm browsing locally with mobile scrollbars. Both divs are still fixed. Here you need to pay attention to an important css style attribute, position:fixed; that is, the style attribute of absolute positioning. The position attribute allows the element to be placed in a static, relative, absolute, or fixed position. What we use here is the fixed style, which is a fixed position.

So if we want to achieve a certain div fixed at a certain position on the page (relative to the browser window), it will not change with the scroll bar. It is necessary to master the position fixed attribute and use it in combination with top:0 and bottom:0.

The above is about the specific implementation method of fixing div at the top or bottom of the page with css. It has certain reference value. I hope it will be helpful to friends in need.

The above is the detailed content of Explanation of the specific method of fixing div at the top or bottom of the page using css. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

See all articles