search
HomeWeb Front-endCSS TutorialHow can computer CSS absolute positioning be displayed normally under different resolutions?

This article mainly introduces how CSS absolute positioning can display the positioning position normally on computers with different resolutions. This article first explains the common computer resolutions. In order for the page to display normally under different resolutions, a safe width must be given to the page. , and then use absolute positioning. You can check the detailed explanation below for the specific operation steps. Interested friends can refer to it. I hope it can help everyone.

Sometimes when we are writing a page, we will find that the absolutely positioned parent element has been relatively positioned, but on computers with different resolutions, the absolute positioning will still be confused. It seems that the relative positioning of the parent is not It worked.

First of all, you must understand the following principles:

1. The resolution of laptops is generally around 1366*768, and the resolution of PCs is generally 1920*1080 ;

The following are common computer resolutions:

When writing a web page, if you write it in a large resolution such as 1920, then go to a small resolution If you look at the same webpage on a high-speed laptop, you will find that the laptop displays basically a display effect of the webpage magnified to about 1.5 times on a large widescreen monitor.

2, In order for the page to display normally under different resolutions, a safe width must be given to the page. Generally, when making a 1920px wide page, there must be a safe width of about 1200px in the middle. , and centered. All content must be written in a box of this width. If there is a background image or carousel image that must cover the entire page, it must be set to center alignment, so that when the resolution is reduced, the background image or Banner image The boxes with a width of 1200 on the left and right and in the middle are still centered and will not deviate to the left or right.

Small boxes such as p in the box can be expressed as percentages to achieve page adaptation.

Use of absolute positioning:

When using absolute positioning, the parent element of the element must be set to relative positioning, so that it can be used in different situations. The positioning will not be messed up under the resolution, but the premise is that the parent element is within a safe width. If the parent element itself is an element that will change due to the lowering of the resolution, the positioning will definitely be messed up.

When laying out the page structure, some box frames are essential, such as p with a safe width of 1200px.

For example: Make an event page, where the background of this page is a large picture. On this big picture, some small pictures should be placed to position it with the big picture. The big picture must not be used directly as the background!

Instead, continue to put a safe width p in the p of the background of the enlarged image, then use it as a parent element for relative positioning, and absolute positioning for the child elements inside, so that it will not appear under different resolutions. The absolute positioning problem is confusing.

By summarizing the experience of netizens, by adding the zoom attribute, a certain section of the page can be automatically zoomed to the appropriate area according to different resolutions. However, there is a bug. Even Firefox browser does not support this attribute. , even using the transform:scale(x,y); attribute does not help. There is also a small problem. When the page is slow to load, refreshing the page will first display the enlarged effect, and then change to the reduced effect, which will flash for a while. I have not found a solution to this, and I hope friends who know more can share it.

zoom code is as follows:

$(function(){        var w=window.screen.width;        var zoom=w/1920;

$("#container").css({
        "zoom",zoom,
        "-moz-transform":"scale("+zoom+")",
      "-moz-transform-origin":"top left"
      });
 });

zoom: current screen resolution width/1920;

zoom attribute browser Supportability:

The result is: except for Firefox, other browsers can support the zoom attribute normally, and the entire block of the page that needs to be zoomed is scaled to suit the current resolution. , and transform:scale first displays the page as if it has enlarged the original page and then uses scale. The reduction is equivalent to the reduction effect of the current page, and both sides will naturally be left blank.

Related recommendations:

relative positioning and absolute positioning in html

detailed chart of advantages and disadvantages of css absolute positioning centering technology

Introduction and use of relative positioning and absolute positioning in css

The above is the detailed content of How can computer CSS absolute positioning be displayed normally under different resolutions?. 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
A Little Reminder That Pseudo Elements are Children, Kinda.A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTImproving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteWeekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherMaking width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersPosition Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryWeekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties

IndieWeb and WebmentionsIndieWeb and WebmentionsApr 19, 2025 am 11:16 AM

The IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.