我的主要div元素应该相对还是绝对定位？

时间：2018-12-02 03:58:54

标签： html css

我只是想了解如何使用相对和绝对位置。根据到目前为止的理解，我知道位置相对将使元素处于正常流动状态，但是对于以下形式，我的主要标题应该相对还是绝对定位？我发现，如果将其放置为相对位置，则某些东西（例如标签）需要绝对定位才能移动，但是如果我将标题放置为绝对位置，则标签就需要相对放置才能产生相同的效果.....希望有人可以帮我澄清一下

<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>


<div class="practice_diary_title">
<h2>Welcome to your practice diary section!</h2>
</div>
<div class="practice_diary">
<form class="signup-form" action="practice_diary_form.php" method="POST">

    <label>Username:</label>
    <br></br>
    <input text="text" name="user_uid" placeholder="Username">
    <br></br>
    <label>Student's First Name:</label>
    <br></br>
    <input text="text" name="first_name" placeholder="Student's First Name">
    <br></br>
    <label>Student's Last Name:</label>
    <br></br>
    <input text="text" name="last_name" placeholder="Student's Last Name">
    <br></br>
    <label>Lesson Title:</label>
    <br></br>
    <input text="text" name="lesson_title" placeholder="Lesson Title">
    <br></br>
    <label class="describe_lesson">Describe Lesson: For example: Did you practice counting? fingering?</label>
    <br></br>
    <div class="practice_diary_text">
    <textarea name="describe_lesson" placeholder="Describe Lesson"></textarea>
    </div>
    <br></br>
    <div class="practice_diary_last_two_questions">
    <label>Hours of practice:</label>
    <br></br>
    <input text="text" name="hours_practice" placeholder="Hours of Practice">
    <br></br>
    <label>Date of Practice:</label>
    <br></br>
    <input text="text"  placeholder="<?php echo htmlspecialchars($date); ?>">
    <br></br>
</div>
    <button type="submit" name="submit">Enter Diary</button>
</form>
</div>


This is my CSS code and I found it easier to place the label positioned the opposite of what I have for the div.practice_diary... I know that I am trying to understand a lot but are there things that is happening without a reason? I just feel that I am trying to understand too much and should just accept that it is working....

div.practice_diary {
  position: absolute;
  top: 118em;
  right: 55em;

}

div.practice_diary input {
   height: 40px;
   padding: 0px 5%;
   margin-bottom: 4px;
   border-radius: 10px solid black;
   background-color: #fff;
   font-family: arial;
   font-size: 16px;
   color: #111;
   display: inline-block;
   width: 300px;

}

div.practice_diary input::placeholder{
  color: #6A5ACD ;
  opacity: 1;
  position: relative;
  left: .5em;
  font-size: 1em;
}

div.practice_diary label {
  color:#008000;
   font-size: 1.5em;
   white-space: nowrap;
   position: absolute;
   left: -2em;
   margin-top: -1em;
}

div.practice_diary textarea {
  width: 40em;
  height:8em;
  position: absolute;
  margin-top: 1em;
  font-size: 1em;
}

div.practice_diary textarea::placeholder {
  color: #6A5ACD ;
  opacity: 1;
  position: relative;
  right: -1em;
  font-size: 1.2em;
}

div.practice_diary_last_two_questions input {
  position: relative;
  top: 9em;

}

div.practice_diary_last_two_questions label {
   color:#008000;
   font-size: 1.5em;
   white-space: nowrap;
   position: relative;
   display: block;
   left: -2em;
   top: 7em;

}

3 个答案:

答案 0 :(得分：0)

阅读本文后：https://dzone.com/articles/css-position-relative-vs-position-absolute 我认为相对职位是您的正确答案。当“绝对”相对于第一个相对（或绝对）定位的父元素时，相对位置可以单独使用，并且如果您经常使用它，则可能导致维护方面的噩梦。我是学生，所以如果答案错误，请给我。

答案 1 :(得分：0)

从我看到的内容来看，您想要的是int size = 0; while ((length = inputStream.read(buffer)) != -1) { outputStream.write(buffer, 0, length); size += length; publishProgress(size*100/your_file_size_in_bytes); } 属性，而不是display属性，只是要在输入/文本区域中放置标签。

您可以删除position并将<br>设置为input以添加换行符。并设置display: block或margin来设置正确的位置。 

padding
div.practice_diary {
  /*position: absolute;
  top: 118em;
  right: 55em;
*/
}

div.practice_diary input, div.practice_diary textarea {
   height: 40px;
   padding: 0px 5%;
   margin-bottom: 4px;
   border: 10px solid #4a70bf;
   border-radius: 10px;
   background-color: #fff;
   font-family: arial;
   font-size: 16px;
   color: #111;
   width: 300px;
   display:block;
}

div.practice_diary input::placeholder{
  color: #6A5ACD ;
  opacity: 1;
  font-size: 1em;
}

div.practice_diary label {
  color:#008000;
   font-size: 1.5em;
   white-space: nowrap;
   margin-top: -1em;
}

div.practice_diary textarea {
  width: 30em;
  height:8em;
  margin-top: 1em;
  font-size: 1em;
}

div.practice_diary textarea::placeholder {
  color: #6A5ACD ;
  opacity: 1;
  font-size: 1.2em;
}

div.practice_diary_last_two_questions input {
  top: 9em;
}

div.practice_diary_last_two_questions label {
   color:#008000;
   font-size: 1.5em;
   white-space: nowrap;
  
}

答案 2 :(得分：0)

要了解有关区别以及何时使用position: absolute或position: relative的更多信息，请遵循以下步骤：https://stackoverflow.com/a/48366786/7145177

据我所知，您可以使用以下方法：

div.practice_diary_title {
            position: relative;
            top: 1%;
        }

        div.practice_diary {
          position: relative;
          top: 1%;
          right: 0%;

        }

        div.practice_diary input {
           height: 40px;
           padding: 0px 5%;
           margin-bottom: 4px;
           border-radius: 10px solid black;
           background-color: #fff;
           font-family: arial;
           font-size: 16px;
           color: #111;
           display: inline-block;
           width: 300px;

        }

        div.practice_diary input::placeholder{
          color: #6A5ACD ;
          opacity: 1;
          position: relative;
          left: .5em;
          font-size: 1em;
        }

        div.practice_diary label {
          color:#008000;
           font-size: 1.5em;
           white-space: nowrap;
           position: relative;
        }

        div.practice_diary textarea {
          width: 40em;
          height:8em;
          position: relative;
          margin-top: 1em;
          font-size: 1em;
        }

        div.practice_diary textarea::placeholder {
          color: #6A5ACD ;
          opacity: 1;
          position: relative;
          right: -1em;
          font-size: 1.2em;
        }

        div.practice_diary_last_two_questions input {
          position: relative;

        }

        div.practice_diary_last_two_questions label {
           color:#008000;
           font-size: 1.5em;
           white-space: nowrap;
           position: relative;
           display: block;
        }
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>


<div class="practice_diary_title">
<h2>Welcome to your practice diary section!</h2>
</div>
<div class="practice_diary">
    <form class="signup-form" action="practice_diary_form.php" method="POST">

        <label>Username:</label>
        <br></br>
        <input text="text" name="user_uid" placeholder="Username">
        <br></br>
        <label>Student's First Name:</label>
        <br></br>
        <input text="text" name="first_name" placeholder="Student's First Name">
        <br></br>
        <label>Student's Last Name:</label>
        <br></br>
        <input text="text" name="last_name" placeholder="Student's Last Name">
        <br></br>
        <label>Lesson Title:</label>
        <br></br>
        <input text="text" name="lesson_title" placeholder="Lesson Title">
        <br></br>
        <label class="describe_lesson">Describe Lesson: For example: Did you practice counting? fingering?</label>
        <br></br>
        
        <div class="practice_diary_text">
            <textarea name="describe_lesson" placeholder="Describe Lesson"></textarea>
        </div>
        
        <br></br>

        <div class="practice_diary_last_two_questions">
            <label>Hours of practice:</label>
            <br></br>

            <input text="text" name="hours_practice" placeholder="Hours of Practice">
            <br></br>
            <label>Date of Practice:</label>
            <br></br>
            <input text="text"  placeholder="<?php echo htmlspecialchars($date); ?>">
            <br></br>
        </div>
        <button type="submit" class="submit" name="submit">Enter Diary</button>
</form>
</div>

随时在评论部分提问，以澄清任何疑问。

相关问题
最新问题