How to flexibly use CSS Positions layout to design web pages-CSS Tutorial-php.cn

How to flexibly use CSS Positions layout to design web pages

WBOY

Release： 2023-09-27 18:39:26

Original

778 people have browsed it

如何灵活运用CSS Positions布局设计网页

How to flexibly use CSS Positions layout to design web pages

In web design, layout is a key part. Flexible use of CSS Positions layout can help us achieve a variety of interesting and unique web design effects. This article will introduce the basic concepts of CSS Positions layout and demonstrate how to use it flexibly through specific code examples.

1. The basic concept of CSS Positions layout
CSS Positions layout refers to a technology that realizes web page layout by adjusting the position and size of elements. CSS Positions has four attribute values to choose from, namely: static (static positioning), relative (relative positioning), absolute (absolute positioning) and fixed (fixed positioning).

static (static positioning): The default layout method, elements are arranged in the order of document flow, and are not affected by other positioning attributes.
relative (relative positioning): Adjust relative to the original position of the element itself. By setting attributes such as top, bottom, left, and right, you can fine-tune the position of elements in the document flow.
Absolute (absolute positioning): Adjust relative to the nearest positioned ancestor element. By setting attributes such as top, bottom, left, and right, elements can be placed anywhere on the page.
fixed (fixed positioning): Adjusted relative to the browser window. By setting attributes such as top, bottom, left, and right, elements can be fixed at a specified position in the browser window.

2. Example of web design effect through CSS Positions layout

sticky footer layout
In some cases, we hope that the footer at the bottom of the page can Sticky to the bottom of the page, the footer stays at the bottom no matter how much content there is. The following is a simple implementation example:

HTML code:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .content {
            flex: 1;
        }

        .footer {
            height: 50px;
            background-color: #f5f5f5;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- 网页内容 -->
    </div>
    <div class="footer">
        <!-- 页脚内容 -->
    </div>
</body>
</html>

Copy after login

By setting the flex property of .content to 1, let it automatically expand the remaining space, while .footer Fixed at the bottom of the page by setting position: fixed; bottom: 0;.

Suspended component layout
Sometimes we need to implement a suspended component (such as a return to top button) in the page. When the user scrolls the page, the suspended component will scroll with the page and stay in a fixed position. The following is a simple implementation example:

HTML code:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 200vh;
            margin: 0;
            padding: 0;
        }

        .scroll-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: #f5f5f5;
            display: none;
        }
    </style>
</head>
<body>
    <div class="scroll-btn"></div>
    <script>
        window.onscroll = function() {
            var btn = document.querySelector('.scroll-btn');
            if (window.scrollY > 200) {
                btn.style.display = 'block';
            } else {
                btn.style.display = 'none';
            }
        }
    </script>
</body>
</html>

Copy after login

By setting the position of .scroll-btn: fixed; and the top and right attributes, the return to top button can be fixed at a specified location on the page. Use the window.onscroll event to listen for scroll events. When the scroll exceeds a certain distance, the button is displayed, otherwise the button is hidden.

The above examples are only a small part of the application scenarios of CSS Positions layout. Through further study and practice, we can flexibly use these technologies to add more imagination to web design. I hope that the CSS Positions layout concepts and examples introduced in this article can provide you with some inspiration and enable you to use layout flexibly in web design.

The above is the detailed content of How to flexibly use CSS Positions layout to design web pages. For more information, please follow other related articles on the PHP Chinese website!