麻烦定位元素。 CSS

Question

我一直在尝试学习 HTMl 和 CSS 一段时间，我已经知道了一些基础知识，但是很长一段时间我一直在努力将项目放置在我想要的位置.

我遵循了很多教程，如果我完全遵循它，嘿，他们做的一切都很完美，但是当我开始玩弄周围的东西让它变得更复杂时，事情并不像我那样表现期待。

例如查看这张图片。我有包含元素的行，第一个我能够用每个项目覆盖 50% 的屏幕并将它们与浮动对齐在中间，但是当我将宽度更改为 40% 而不是 50% 时，它们会松开中心对齐，对我来说更奇怪的是，它们向下移动了几个像素并松开了与下面项目的分离。我不明白为什么改变宽度会影响它的垂直位置。

对于第二行的元素，我将它们定位为绝对位置，我不知道如何将它们居中放置在屏幕中间。

安德第四行，米色和绿色的框，我不明白为什么米色框上的文字在框的底部，部分在框外，而文字全部其他行自动与框的中心垂直对齐。

这是我的代码：

       body {
                margin: auto;
                max-width: 4000px;
                height: 5000px;
                font-family: "Lato";
            }
            #text-1{
                background-color: black;
                color: white;
                width: 50%;
                padding: 20px, 50px;
                float: left;
                text-align: center;
                text-justify: auto;
            }
            
            #text-1:hover{
                background-color: white;
                color: black;
            }
            
            #text-2 {
                background-color: lightgray;
                color: black;
                width: 50%;
                padding: 20px, 50px;
                float: left;
                text-align: center;
                text-justify: auto;
            }
            
            #text-2:hover {
                background-color: white;
                color: black;
            }
            
             #text-3{
                background-color: black;
                color: white;
                width: 500px;
                
                padding: 0px, 50px;
                position: absolute;
                left:200px;
                top: 100px;
                text-align: center;
                
            }
            
            #text-3:hover{
                background-color: white;
                color: black;
            }
            
            #text-4 {              
                background-color: lightgray;
                color: black;
                width: 500px;
                padding: 0px, 50px;
                position: absolute;
                left: 700px;
                top: 100px;
                text-align: center;
                
            }
            
            #text-4:hover {
                background-color: white;
                color: black;
            }
            
            #text-5 {              
                background-color: lightpink;
                color: black;
                width: 100%;
                padding: 0px, 50px;
                position: fixed;
                top: 200px;
                text-align: center;
                
            }
            
            #text-5:hover {
                background-color: white;
                color: black;
            }
        
            a:link{
                text-decoration: none;
                color: inherit;
            }
            
            a:visited{
                text-decoration: none;
                color: inherit;
                
            }
            
            .box-1 {
                background-color: beige;
                color: black;
                width: 500px;
                height: 100px;
                position: relative;
                left: 100px;
                top:300px;
                text-align: center;
                border-style: solid;
                border-width: 1px;
                padding-left: 20px;
                padding-right: 20px;
                z-index: 1;
            }
            
            .box-2 {
                background-color: lightgreen;
                color: black;
                width: 200px;
                height: 100px;
                position: relative;
                left: 300px;
                top: 250px;
                padding: 20px, 20px,20px, 20px;
                text-align: center;
                border-style: solid;
                border-width: 1px;
                z-index: 0;
            }

    <html>
    <head>
        <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>

        
        
        
    </head>
    
   
    <body>
        <div id="text-1">
            <a href="index.html" target="_blank">
                <p>Experimenting with one paragraph</p>
                <p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
            </a>
        </div>
        
        <div id="text-2">
            <a href="index.html" target="_blank">
                <p>Another chunck of text</p>
                <p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
            </a>    
        </div>
    
        <div id="text-3">
            <a href="index.html" target="_blank">
                <p>Button 3</p>
                <p>This button has an absolute posittion, so it doesn't float around.</p>
            </a>
        </div>
        
        <div id="text-4">
            <a href="index.html" target="_blank">
                <p>Button 4</p>
                <p>This button has an absolute posittion, so it doesn't float around.</p>
            </a>    
        </div>
        
        <div id="text-5">
            <a href="index.html" target="_blank">
                <p>Button 4</p>
                <p>This button has a fixed posittion, so it wont move when scrolling up or down</p>
            </a>    
        </div>
    
        <div class="box-1">
                <p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p>
        </div>
        
        <div class="box-2"></div>
                      
    </body>
</html>

Answer 1

你想要这样吗？

body {
    margin: auto;
    max-width: 4000px;
    height: 5000px;
    font-family: "Lato";
}
#text-1{
    background-color: black;
    color: white;
    width: 50%;
    padding: 20px, 50px;
    float: left;
    text-align: center;
    text-justify: auto;
    position: relative;
}

#text-1:hover{
    background-color: white;
    color: black;
}

#text-2 {
    background-color: lightgray;
    color: black;
    width: 50%;
    padding: 20px, 50px;
    float: left;
    text-align: center;
    text-justify: auto;
    position: relative;
}

#text-2:hover {
    background-color: white;
    color: black;
}

 #text-3{
    background-color: black;
    color: white;
    width: 40%;
    padding: 0px, 50px;
    position: absolute;
    left:10%;
    top: 110px;
    text-align: center;

}

#text-3:hover{
    background-color: white;
    color: black;
}

#text-4 {              
    background-color: lightgray;
    color: black;
    width: 40%;
    padding: 0px, 50px;
    position: absolute;
    left: 50%;
    top: 110px;
    text-align: center;

}

#text-4:hover {
    background-color: white;
    color: black;
}

#text-5 {              
    background-color: lightpink;
    color: black;
    width: 100%;
    padding: 0px, 50px;
    position: fixed;
    top: 200px;
    text-align: center;

}

#text-5:hover {
    background-color: white;
    color: black;
}

a:link{
    text-decoration: none;
    color: inherit;
}

a:visited{
    text-decoration: none;
    color: inherit;

}

.box-1 {
    background-color: beige;
    color: black;
    width: 500px;
    height: 100px;
    position: relative;
    left: 100px;
    top:300px;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 1;
    margin: 0;
}

.box-2 {
    background-color: lightgreen;
    color: black;
    width: 200px;
    height: 100px;
    position: relative;
    left: 300px;
    top: 250px;
    padding: 20px, 20px,20px, 20px;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    z-index: 0;
}
.box-1 > p{
  position: absolute;
}

<!DOCTYPE html>
<html>
<head>
 <title></title>
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
    <div id="text-1">
        <a href="index.html" target="_blank">
            <p>Experimenting with one paragraph</p>
            <p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
        </a>
    </div>

    <div id="text-2">
        <a href="index.html" target="_blank">
            <p>Another chunck of text</p>
            <p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
        </a>    
    </div>

    <div id="text-3">
        <a href="index.html" target="_blank">
            <p>Button 3</p>
            <p>This button has an absolute posittion, so it doesn't float around.</p>
        </a>
    </div>

    <div id="text-4">
        <a href="index.html" target="_blank">
            <p>Button 4</p>
            <p>This button has an absolute posittion, so it doesn't float around.</p>
        </a>    
    </div>

    <div id="text-5">
        <a href="index.html" target="_blank">
            <p>Button 4</p>
            <p>This button has a fixed posittion, so it wont move when scrolling up or down</p>
        </a>    
    </div>

    <div class="box-1">
        <p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p>
    </div>
    <div class="box-2"></div>
</html>
</body>
</html>

在第 2 行中，通过将 #text-4 和 #text-5 的宽度指定为 40%，#text-4 的左侧为 10%，#text-5 的左侧为 50，div 在中心对齐%。 #box-1 内的 P 标签通过设置它的绝对位置

在 #box-1 内对齐

麻烦定位元素。 CSS

Trouble positioning elements. with CSS

html

css

css-position