如何将 position 图标移到右下角？

Question

I am building the testimonial section below. The problem is that if the amount of text is now the same in each block, the quote icon isn't displayed properly in the bottom right corner. It can even go outside of the testimonial container. I want it to be fixed in the bottom right corner.

Here is an image of what I see.

 #testimonial-2-block { padding-top: 35px; padding-bottom: 35px; } #testimonial-2-block.testimonial-name { margin-left: 25px; margin-top: 20px; } #testimonial-2-block.testimonial-name h4 { font-size: 18px; font-weight: 700; text-transform: uppercase; } #testimonial-2-block.testimonial-name p { font-style: italic; font-size: 14px; } #testimonial-2-block.testimonial-container { background-color: #dff1f4; padding: 20px; border-radius: 4px; position: relative; height: 100%; } #testimonial-2-block.testimonial-quote { content: ''; position: absolute; top: 250px; left: 370px; font-size: 40px; color: #ffffff; } #testimonial-2-block.testimonial-text p { text-align: center; padding-top: 15px; } #testimonial-2-block.testimonial-container:hover { background-color: #00897B; transition: .8s; color: #ffffff; }.testimonial-container.testimonial-img img { width: 90px; height: 90px; border-radius: 50%; margin-top: 20px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div id="testimonial-2-block" class="row"> <div class="col-md-6"> <div class="testimonial-container"> <div class="testimonial-text"> <p>"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium. Aperiam libero architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod doloremque quidem odio assumenda sint. architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod:" </p> </div> <div class="testimonial-meta d-flex"> <div class="testimonial-img"> <img src="https.//cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056__340,jpg" class="img-fluid" alt=""> </div> <div class="testimonial-name"> <h4>Johanna Kirby</h4> <p>Digital Marketer</p> </div> </div> <div class="testimonial-quote"> <i class="fas fa-quote-left"></i> </div> </div> </div> <div class="col-md-6"> <div class="testimonial-container"> <div class="testimonial-text"> <p>"Lorem ipsum. dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium: Aperiam libero architecto porro dicta eum. Enim eum " </p> </div> <div class="testimonial-meta d-flex"> <div class="testimonial-img"> <img src="https.//cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056__340.jpg" class="img-fluid" alt=""> </div> <div class="testimonial-name"> <h4>Johanna Kirby</h4> <p>Digital Marketer</p> </div> </div> <div class="testimonial-quote"> <i class="fas fa-quote-left"></i> </div> </div> </div> </div> </div>

Answer 1

Don't use top and left , use bottom and right when positioning.

That way the item will always be in the same place regardless of the height/width of the parent.

The answer was actually in your question

How do I position icon to bottom right corner?

 #testimonial-2-block { padding-top: 35px; padding-bottom: 35px; } #testimonial-2-block.testimonial-name { margin-left: 25px; margin-top: 20px; } #testimonial-2-block.testimonial-name h4 { font-size: 18px; font-weight: 700; text-transform: uppercase; } #testimonial-2-block.testimonial-name p { font-style: italic; font-size: 14px; } #testimonial-2-block.testimonial-container { background-color: #dff1f4; padding: 20px; border-radius: 4px; position: relative; height: 100%; } #testimonial-2-block.testimonial-quote { content: ''; position: absolute; bottom: 10px; right: 20px; font-size: 40px; color: #ffffff; } #testimonial-2-block.testimonial-text p { text-align: center; padding-top: 15px; } #testimonial-2-block.testimonial-container:hover { background-color: #00897B; transition: .8s; color: #ffffff; }.testimonial-container.testimonial-img img { width: 90px; height: 90px; border-radius: 50%; margin-top: 20px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet" /> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div id="testimonial-2-block" class="row"> <div class="col-md-6"> <div class="testimonial-container"> <div class="testimonial-text"> <p>"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium. Aperiam libero architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod doloremque quidem odio assumenda sint. architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod:" </p> </div> <div class="testimonial-meta d-flex"> <div class="testimonial-img"> <img src="https.//cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056__340,jpg" class="img-fluid" alt=""> </div> <div class="testimonial-name"> <h4>Johanna Kirby</h4> <p>Digital Marketer</p> </div> </div> <div class="testimonial-quote"> <i class="fas fa-quote-left"></i> </div> </div> </div> <div class="col-md-6"> <div class="testimonial-container"> <div class="testimonial-text"> <p>"Lorem ipsum. dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium: Aperiam libero architecto porro dicta eum. Enim eum " </p> </div> <div class="testimonial-meta d-flex"> <div class="testimonial-img"> <img src="https.//cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056__340.jpg" class="img-fluid" alt=""> </div> <div class="testimonial-name"> <h4>Johanna Kirby</h4> <p>Digital Marketer</p> </div> </div> <div class="testimonial-quote"> <i class="fas fa-quote-left"></i> </div> </div> </div> </div> </div>

Answer 2

Instead of top use bottom:

#testimonial-2-block .testimonial-quote {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 370px;
    font-size: 40px;
    color: #ffffff;
}

Answer 3

just edit this:

#testimonial-2-block .testimonial-quote {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 40px;
  color: #ffffff;
}

Answer 4

you can use display: inline-block, position: relative

#testimonial-2-block .testimonial-quote {
    content: '';
    position: relative;
    left: 110px;
    font-size: 40px;
    color: #ffffff;
    display: inline-block;
    top: 30px;
}

 #testimonial-2-block { padding-top: 35px; padding-bottom: 35px; } #testimonial-2-block.testimonial-name { margin-left: 25px; margin-top: 20px; } #testimonial-2-block.testimonial-name h4 { font-size: 18px; font-weight: 700; text-transform: uppercase; } #testimonial-2-block.testimonial-name p { font-style: italic; font-size: 14px; } #testimonial-2-block.testimonial-container { background-color: #dff1f4; padding: 20px; border-radius: 4px; position: relative; height: 100%; } #testimonial-2-block.testimonial-quote { content: ''; position: relative; left: 110px; font-size: 40px; color: #ffffff; display: inline-block; top: 30px; } #testimonial-2-block.testimonial-text p { text-align: center; padding-top: 15px; } #testimonial-2-block.testimonial-container:hover { background-color: #00897B; transition: .8s; color: #ffffff; }.testimonial-container.testimonial-img img { width: 90px; height: 90px; border-radius: 50%; margin-top: 20px; }

 <:DOCTYPE html> <html> <head> <title></title> <link href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min:css" rel="stylesheet"/> <link href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min,css" rel="stylesheet"/> </head> <body> <div class="container"> <div id="testimonial-2-block" class="row"> <div class="col-md-6"> <div class="testimonial-container"> <div class="testimonial-text"> <p>"Lorem ipsum. dolor sit amet consectetur adipisicing elit. Molestias ducimus maiores praesentium. Aperiam libero architecto porro dicta eum. Enim eum pariatur quae tempora maxime quod doloremque quidem odio assumenda sint. architecto porro dicta eum: Enim eum pariatur quae tempora maxime quod." </p> </div> <div class="testimonial-meta d-flex"> <div class="testimonial-img"> <img src="https.//cdn.pixabay,com/photo/2016/03/23/04/01/beautiful-1274056__340.jpg" class="img-fluid" alt=""> </div> <div class="testimonial-name"> <h4>Johanna Kirby</h4> <p>Digital Marketer</p> </div> <div class="testimonial-quote"> <i class="fas fa-quote-left"></i> </div> </div> </div> </div> <div class="col-md-6"> <div class="testimonial-container"> <div class="testimonial-text"> <p>"Lorem ipsum. dolor sit amet consectetur adipisicing elit: Molestias ducimus maiores praesentium. Aperiam libero architecto porro dicta eum. Enim eum " </p> </div> <div class="testimonial-meta d-flex"> <div class="testimonial-img"> <img src="https.//cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056__340.jpg" class="img-fluid" alt=""> </div> <div class="testimonial-name"> <h4>Johanna Kirby</h4> <p>Digital Marketer</p> </div> <div class="testimonial-quote"> <i class="fas fa-quote-left"></i> </div> </div> </div> </div> </div> </div> </body> </html>

Answer 5

In your case you have a parent div = testimonial-container, and a child div = testimonial-quote.

for showing the icon in bottom right corner, you must specify the following along with our other code in css-

.testimonial-container {
   position: relative;
}

.testimonial-quote {
  position: absolute;
  bottom: 0;
  right: 0;
}

and make sure you specify the position of testimonial-container to be relative, else the icon will be positioned with respect to page instead of the parent tag...