CSS positioning and rounded rectangle (6)

Time:2021-7-18

location

The core of the layout: the location of the CSS box

Positioning: set the box in a certain position and float freely on other boxes

Positioning = positioning mode + edge offset

Edge offset

CSS positioning and rounded rectangle (6)

Top down order of three layout mechanisms

Standard flow + floating + positioning

Positioning mode

Selector {position: property value}

CSS positioning and rounded rectangle (6)

Static positioning (understanding)

Static: static positioningStatic positioning is the default attribute in positioning mode, which has no edge offset and is hardly used in mesh layout

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: static;
            top: 200px;
            left: 200px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

CSS positioning and rounded rectangle (6)

Relative (understanding)

Relative positioning is based on the position of its own standard flow.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
            /*Change to relative positioning*/
            position: relative;
            top: 200px;
            left: 200px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

CSS positioning and rounded rectangle (6)

Two characteristics of relative positioning

  • Continue to occupy the original position
  • Offset the edge relative to its position
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .box2 {
            position: relative;
            top: 200px;
            left: 200px;
            background-color: brown;
        }
    </style>
</head>

<body>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

CSS positioning and rounded rectangle (6)

Absolute positioning

Characteristics of absolute positioning

  • Do not occupy the original position, away from the standard flow
  • Absolute positioning is based on the positioning of the parent element. The parent element cannot be statically positioned. If the parent element is not positioned, the browser’s view box will prevail
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 600px;
            height: 600px;
            background-color: brown;
            position: relative;
        }
        
        .box1,
        .box2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        
        .box1 {
            background-color: red;
            position: absolute;
            top: 100px;
            left: 300px
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

</html>

CSS positioning and rounded rectangle (6)

Son, father

In short. That is, the child element uses absolute positioning, and the parent element uses relative positioning. Only in this way, the following standard flow layout will not be affected

In this case, the two arrows use absolute positioning, while the parent element uses relative positioning

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .pic {
            position: relative;
            width: 600px;
            height: 600px;
            margin: 200px auto;
        }
        
        .arr-left {
            position: absolute;
            top: 300px;
            left: 0;
        }
        
        .arr-right {
            position: absolute;
            top: 300px;
            right: 0!important;
        }
    </style>
</head>

<body>

    <div class="pic">
        <img>
        <img class="arr-left">
        <img class="arr-right ">
    </div>
    < </body>

</html>

CSS positioning and rounded rectangle (6)

Hagdas case

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: relative;
            width: 310px;
            height: 190px;
            padding: 15px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }
        
        img:nth-child(2) {
            position: absolute;
            top: 0;
            left: 0;
        }
        
        img:nth-child(3) {
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <img>
        <img>
        <img>
    </div>
</body>

</html>

CSS positioning and rounded rectangle (6)

Fixed positioning

Characteristics of fixed positioning

  • Out of standard flow
  • Do not scroll with the scroll bar, only browser view
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            height: 3000px;
        }
        
        img {
            position: fixed;
            width: 200px;
            top: 200px;
            left: 0;
        }
        
        p {
            width: 100%;
            height: 100px;
            margin: 50px 0px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <img>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>

</html>

CSS positioning and rounded rectangle (6)

Sina case

Note that sina navigation is a picture here, and fixed positioning is used in the head and advertising columns on both sides

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .header {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #FCFCFC;
            text-align: center;
        }
        
        .content {
            width: 1020px;
            height: 1760px;
            margin: auto;
            margin-top: 44px;
        }
        
        .ad-l {
            position: fixed;
            top: 200px;
            left: 0;
        }
        
        .ad-r {
            position: fixed;
            top: 200px;
            right: 0;
        }
    </style>
</head>

<body>
    <img class="ad-l">
    <img class="ad-r">
    <div class="header">
        <img class="top">
    </div>
    <div class="content">
        <img>
    </div>



</body>

</html>

CSS positioning and rounded rectangle (6)

Center alignment of absolute positioning box

principle

  • Move half of parent element first left: 50%
  • Move the negative half of its width
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            left: 50%;
            margin-left: -200px;
            width: 400px;
            height: 400px;
            background-color: green;
        }
    </style>
 </head>

<body>
    <div class="box"></div>
</body>

</html>

CSS positioning and rounded rectangle (6)

stack order

When positioning layout is used, there is usually a problem that when the boxes are stacked, the positioned boxes come from behind and Z-index can change the stacking order of the positioned boxes

1. The value of Z-index can be a positive integer, a negative integer 0, etc. The higher the value, the higher the box
2. The value of Z-index cannot follow the unit, otherwise it will not take effect
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {margin: 0;
            padding: 0;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
        
        .box2 {
            top: 100px;
            left: 100px;
            background-color: red;
            z-index: 6;
        }
        
        .box3 {
            top: 200px;
            left: 200px;
            background-color: grey;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

CSS positioning and rounded rectangle (6)

Positioning changes the display property

Display is the display mode. You can change the display property by the following modes

  • Using inline block to convert intra row block display mode
  • The use of float conversion is similar to the in-line block display mode, but away from the standard flow
  • You can also change the display mode by using absolute or fixed in positioning mode

From the above conclusion, we know that: with floating or absolute positioning, fixed positioning does not need to change the display mode

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            position: absolute;
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: indigo;
        }
    </style>
</head>

<body>
    <span>Yao Zimo</span>
</body>

</html>

CSS positioning and rounded rectangle (6)

Outer margin merging problem

Floating absolute positioning (fixed positioning) can change the outer margin merging problem

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 600PX;
            height: 600PX;
            background-color: PINK;
        }
        
        .son {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

CSS positioning and rounded rectangle (6)

Rounded rectangle sets four corners

Pay attention to the order, can be abbreviated

CSS positioning and rounded rectangle (6)

Taobao static rotation chart

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            position: relative;
            width: 520px;
            height: 280px;
            margin: 200px auto;
            background-color: pink;
        }
        
        li {
            list-style: none;
        }
        
        .arr-left,
        .arr-right {
            /*You can set the positioning element without changing the display mode*/
            position: absolute;
            /*In order to achieve the effect of center alignment, the box that locates the box first takes half of the parent element and then takes the negative half of itself*/
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            color: white;
            line-height: 30px;
            text-decoration: none;
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .arr-left {
            text-align: left;
            left: 0;
            border-radius: 0px 50% 50% 0px;
        }
        
        .arr-right {
            text-align: right;
            right: 0;
            border-radius: 50% 0px 0px 50%;
        }
        /*Union selector collective declaration*/
        
        .arr-left:hover,
        .arr-right:hover {
            color: royalblue;
            background-color: rgba(0, 0, 0, 0.8);
        }
        
        .circle {
            position: absolute;
            left: 50%;
            margin-left: -60px;
            bottom: 20px;
            width: 120px;
            height: 20px;
            background-color: pink;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.6);
        }
        
        .circle li {
            float: left;
            width: 10px;
            height: 10px;
            margin: 5px;
            background-color: white;
            border-radius: 50%;
        }
        /*Weight problem, so we should add weight to ensure that the current Li takes effect*/
        
        .circle .current {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <!--  Left button -- >
        <a href="#" class="arr-left">&lt;</a>
        <!--  Right button -- >
        <a href="#" class="arr-right">&gt;</a>
        <!--  Picture -- >
        <img>
        <!--  Bottom navigation bar -- >
        <ul class="circle">
            <li></li>
            <li></li>
            <li></li>
            <li class="current "></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

CSS positioning and rounded rectangle (6)

Positioning summary

CSS positioning and rounded rectangle (6)

matters needing attention

  • Left right cannot be used at the same time
  • Top bottom cannot be used at the same time

The problem of side advertisement column in web page layout

How to make a sidebar align close to the center of the layout? Use fixed positioning to go half of the browser’s view, then half of the center of the layout + its own width

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
        * {
            margin: 0;
            padding: 0;
        }
        
        .side-nav {
            position: fixed;
            top: 50%;
            margin-top: -100px;
            left: 50%;
            margin-left: -800px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .container {
            width: 1200px;
            height: 1800px;
            background-color: pink;
            margin: auto;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="side-nav"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>

</body>

</html>

CSS positioning and rounded rectangle (6)