Should my main div element be positioned relative or absolute?

Question

I am just trying to understand how to use position relative and absolute. From my understanding so far, I know that position relative will put the element in its normal flow but for a following form, should my main title be positioned relative or absolute? I found that if I made it positioned relative, certain things such as the labels need to be positioned absolute to move around things but if I put the title as positioned absolute, then the label would need to be in positioned relative to have the same effect..... Hope someone could clarify this for me

<!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;

}

You forgot to add code. Without it, there’s really no way someone can help you. If you need an explanation on how `position` works, start here: https://developer.mozilla.org/en-US/docs/Web/CSS/position — nemanja, Dec 02 '18 at 04:09

score 0 · Answer 1 · 2018-12-02T08:07:55.170

0

After read this article: https://dzone.com/articles/css-position-relative-vs-position-absolute I think the Relative Position is the right answer for you. The relative position can be use alone, when the Absolute is relative to the first relatively (or absolutely) positioned parent element, and if you often use it, it can lead to a maintenance nightmare. I am a student so if the answer is wrong please for give for me.

edited Dec 02 '18 at 08:07

answered Dec 02 '18 at 08:02

This is still weird though because I have no child elements and yet when using position relative for the whole div class, I need to use position absolute for certain things... – Dec 02 '18 at 08:09

score 0 · Answer 2 · answered Dec 02 '18 at 08:47

From what I see what you want is display property not position except you want to place label inside input/textarea.

you can remove <br> and set input to display: block to add line-break. and set margin or padding to set correct position.

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;
  
}

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

so in future, for all my input boxes and textarea, I should use display-block and this will line it up correctly? — , Dec 03 '18 at 07:24

score 0 · Accepted Answer · answered Dec 02 '18 at 08:48

For understanding more about the difference and when to use position: absolute or position: relative please follow this: https://stackoverflow.com/a/48366786/7145177

To my understanding, you can use this:

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>

Feel free to ask questions in the comment section to clarify any doubts.

thanks but i guess did you guys have a reason to use position relative and absolute because I am still puzzled as to why something I can't use position relative for everything, especially when there are no child elements present — , Dec 02 '18 at 08:50
If you want to take ur element out of the normal page flow and position it accordingly, use absolute. Else relative can be used for rest all the cases. — Pransh Tiwari, Dec 02 '18 at 09:24
I think so and I guess this will clear up the more programming that I do but I am still wondering if my overall div class should be position relative or absolute? I guess as you said it depends.... if I want to stay in normal flow, use position relative but I realise that my other elements would need to be position absolute or the opposite to move around — , Dec 03 '18 at 07:23
It depends on how you are handling it. You can have the overall div class as relative and the child elements to be relative/absolute or be absolute and the child elements to be relative/absolute. It depends upon the comfort and the use case, but for this case, in my personal opinion I'd go for parent as relative and child elements as relative or absolute(depending upon the element). — Pransh Tiwari, Dec 03 '18 at 07:33
So I guess my syntax here is wrong then because I don't have any child elements at all because it is not within my parent's div class? — , Dec 03 '18 at 07:34
Yes, Then u'll be able to use relative positioning on the child elements easily. — Pransh Tiwari, Dec 03 '18 at 12:00
thanks... that explains why it was hard for me to decide which position to use.. So in future, for all forms, I should do a parent to child div class... have a child div within the parent's div as in the following: — , Dec 03 '18 at 12:09

Should my main div element be positioned relative or absolute?

3 Answers3