Visual area ( viewport )

When a viewer looks at a web file , Usually the user agent (User Agents, UA, browser ) Will give the viewer a view ( Windows or other visual areas in the picture ). When we adjust the viewing area ,UA It's possible to change the layout of the file .

When the view is larger than what the file presents Canvas The area is still small ,UA A scroll mechanism may be provided to give you a glimpse of the whole file . In theory, each Canvas There can only be one viewing area at most , however UA Can produce more than one Canvas( For example, providing different viewing areas on the same document , Such as frame lattice ).

Bearing blocks ( Containing block )

If some box The position and size of are related to others 「 Rectangular square 」 The edge of (edges) To calculate , That's what we're going to do 「 Rectangular square 」 It's called the bearing block (Containing Blocks). In a nutshell , The so-called bearing block refers to , leave 「 This element 」 The nearest block level parent element ; No matter what 「 This element 」 Positioning or floating , It's all about it Bearing blocks To be a reference ( except fixed Positioning mode ).

Below is a simple diagram of the bearing block (demo-two The bearing block of is demo-one).

  • When the parent element is a block element , The size of the bearing block is the distance to the inner edge .
  • When the parent element is a monoserial element , The size of the hosting block is to the edge of the content .

Normal flow direction ( Normal flow )

What is the normal flow direction ? From top to bottom 、 From left to right is the so-called normal flow direction ; We take Hypertext Markup Language Come on , The direction of its original code writing is from top to bottom, from left to right , This is the normal flow direction . And the browser is also based on this trend to interpret ( literal translation ) Our source code .

To put it another way , In most cases , Normal flow refers to the web page , How to display element labels . in addition , Most of them HTML Element tags belong to inline box or blockbox.block box It can contain inline box; conversely ,inline box It can't contain blockbox.


Of The set value
static state  |  relative  |  absolute  |  center  |  page  |  Fix
Preset 2006/02/15: static state
Apply to : All elements except table column group and table column
inheritance : nothing

Used to put HTML The element produces box Position it where we want it to appear .

Static positioning | Positioning of static position

Locate in the order in which the source code was written . In vernacular, we write in order HTML The element produces box Let it naturally line up where it should be .static This value doesn't have to be specified , Because it's the default , That is to say, all box The elements are all in their proper place at the beginning . And it doesn't apply bottom、left、right And top These four attributes .

Relative positioning | The positioning of relative position

Relative to the original position ( Not relative to other elements ). Position elements relative to ​​ In the original position ; The element will move to where we are located , The size of the original location will be preserved in the bearing block .

Absolute positioning | Absolute positioning

Relative to the location of the bearing block . The element will come from HTML Remove from the flow of , Then, according to the bearing block, the element should be repositioned , The size of the original location will be cleared in the bearing block . The location value of the parent element cannot be static.

Fixed position | Fixed position positioning

Relative to the browser window Visual area coordinate , Fix the position and no longer change with the movement of the reel .

Next , Left , Right , Top

Of The set value
The bottom box sets the lower spacing, the left box sets the left spacing, the right spacing, and the top box sets the upper spacing

automobile  | <  length  > | <  percentage  >
Default :auto 
Apply to : Positioning elements
inheritance : nothing

These four attributes are used to set the boundary distance between the located target element and the bearing block . It should be noted that , All four values can be negative ; When it's negative , The position of the element will run outside the boundary of the host block .

z-index value

Of The set value
z-index Conduct
ž Axis positioning
automobile  | <  Integers  >
Default :auto 
Apply to : Positioning elements
inheritance : nothing

It's used to make elements stack and cover each other . The higher the value, the higher the value  ( Negative values can also be used ).


Of The set value
Trim the visible range
automobile  | <  shape  >
Default :auto 
Apply to : Absolute positioning element
inheritance : nothing

The volume in the visible range is fixed around the scissors .


  • RECT RECT( On , Right , Next , Left ) From the point of view of elements top left corner Start cutting out .
  • illustrations   illustrations ( On , Right , Next , Left ) It's like a rectangle , But it's from the boundary of elements Cut it in .


CSS3 location | Position More related articles on research

  1. 6.css3 location --position

    ⑴Static The default value is , No location . ⑵Absolute Absolute positioning . Later elements will be replaced by the original offset . ⑶Relative Relative positioning . The following elements will not be offset . ⑷Fixed Absolute positioning . Relative to the browser window ...

  2. CSS3 Positioning and floating

    This article is for you to share CSS3 The basic concepts of positioning and floating , And how to use it , For your reference , The details are as follows One . location 1. css location : Change the position of the element on the page 2. css Positioning mechanism : Ordinary flow : float : Absolute layout : 3. cs ...

  3. css location position Go deep

    1.static: Objects follow the normal flow . here 4 Location offset attributes will not be applied . 2.relative: Objects follow the normal flow , And refer to their own position in the regular flow through top,right,bottom,left this 4 This is a positioning offset attribute ...

  4. css Consider the past you shall know the future location (position) And authority (z-index)

    1. Positioning (position) The permissions of the element (z-index) It's always higher than the one without positioning . 2. If both elements are positioned , Whether it's relative positioning or absolute positioning . Their authority is equal . 3. Two elements of the same location , except z-ind ...

  5. location position: absolute &amp; relative

    [position:absolute] It means absolute positioning , He defaults to the top left corner of the browser , coordination TOP.RIGHT.BOTTOM.LEFT( Hereinafter referred to as TRBL) Positioning , It has the following properties : 1) without TRBL, As a parent ...

  6. css location position know

    1. Absolute positioning (position: absolute) 2. Relative positioning (position: relative) 3. Fixed position (position: fixed) Absolute positioning Set up position:absolu ...

  7. CSS3 The study of selectors , Case study

    In the last article CSS3 Almost all of them are listed in the study of selectors CSS3 Selectors , And pseudo class selectors , When there is no case study , I wanted to write in that article , But think about it if you write all the cases in that article , It's not very convenient for searching , Let's talk about it in another article ...

  8. div+css location position Detailed explanation

    div+css location position Detailed explanation 1.div+css Positioning in position The two most important attributes : attribute absolute( Absolute positioning ) relative( Relative positioning ), It's them that make div+css Layout ...

  9. By positioning position=&quot;fixed&quot; Realize the fixed layer effect of web content

    Fixed layer effect is often used in the top or bottom navigation bar of a web page , That is, it is close to the top or bottom of the browser window, and the influence of other contents of the web page . One . Realization Mainly by setting the location attribute of the navigation bar element position="fixed" ...

Random recommendation

  1. jQuery uploadify Upload files

    uploadify This plug-in is based on js Inside jquery Library written . Combined with the ajax and flash, Realized this multithread upload function . Now the latest version is 3.2.1. Online examples Instance preview  Uploadify Online examples Demo ...

  2. System.Data.EntityState” Define... In an unreferenced assembly

    type “System.Data.EntityState” Define... In an unreferenced assembly . Must add to assembly “System.Data.Entity, Version=, Culture=neu error ...

  3. docker Command summary

    Command summary docker history fa5fa5 For the mirror id Or the image name docker export 30b >h.tar30b For containers id Or the container name # docker export angry_b ...

  4. Android WeChat SDK API Call the tutorial

      Recently, I have been calling wechat's API, But found that the call has been unsuccessful , For a long time , Find tutorials in all aspects , Find the official , The official documents are just vague , It's a three-step process . 1. apply App_ID 2. Fill in the package name. 3. Get program signature md5 value , this ...

  5. 【POJ2406】 Power Strings (KMP)

    Power Strings Description Given two strings a and b we define a*b to be their concatenation. For exa ...

  6. hibernate_validator_10

    Combination of constraints -- Combine multiple constraints into a single constraint In the previous section, we customized @CheckCase It's used to check if String Note in uppercase , By default, when our String by null It's also thought to be right CaseMode ...

  7. Word Amalgamation(hdoj1113)

    Word Amalgamation Problem Description In millions of newspapers across the United States there is a ...

  8. How to connect wechat payment and wechat delivery notification interface (Js API)

    How to connect wechat payment and wechat delivery notification interface (Js API) Wechat payment provides a payment test page , The official use of wechat payment requires testcom payment . Delivery notification interface . Alarm interface . Rights protection interface . Alarm interface . The human rights interface is very easy. Payment interface adjustment is also relatively ...

  9. 【Unity】 A dependency injection component from Microsoft

    Preface I learned from the front autofac This dependency injection component , It was meant to be written together , Because this component is not going to look like autofac Write in the same detail , Just write down a dependency injection component that I used to build a framework by myself , And it is also used for encapsulation . ...

  10. Kubernetes Cluster construction Etcd Cluster configuration

    Introduce etcd It's a distributed consistency k-v The storage system , Can be used for service registration discovery and sharing configuration , Has the following advantages . Simple : Compared to the obscure paxos Algorithm ,etcd Based on a relatively simple and easy to implement raft Algorithm implementation consistency , And pass g ...