nsd nsd - 3 months ago 12
CSS Question

Relative and absolute positioning in CSS

I have to place one box (div) inside another (Chicken, Beef, sushi in this example) and the position of that box should be top right corner. I am getting stuck if I change the size of the screen (i.e. contract the browser window) or test it for a smaller device. Can someone help me get through with it?

here is the link to the code: https://jsfiddle.net/nupursd/uzvfsbmc/

CSS

body{
align-content: center;
}
* {
box-sizing: border-box;
}

h1 {
text-align: center;
margin-bottom: 15px;
}
div{
position: relative;
}
p {

border: 3px solid black;
background-color: #D3D3D3;
width: 90%;
height: 175px;
font-family: "Arial", Helvetica, sans-serif;
color: black;
text-align: justify;
padding-left:10px;
padding-bottom:10px;
padding-right:10px;
font-size: medium;
overflow: auto;
}
#Dish1{
position: absolute;
top:15px;
left:385px;
width:70px;
height:20px;
border: 2px solid black;
background-color: white;
text-align: center;
}
#Dish2{
position: absolute;
top:15px;
left:385px;
width:70px;
height:20px;
border: 2px solid black;
background-color: white;
text-align: center;
}
#Dish3{
position: absolute;
top:15px;
left:385px;
width:70px;
height:20px;
border: 2px solid black;
background-color: white;
text-align: center;
}


.row {
width: 100%;
}
/********** Large devices only **********/
@media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;

}

.col-lg-4 {
width: 33.33%;
}
.col-lg-6 {
width: 50%;
}

.col-lg-12 {
width: 100%;
}
}
/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;

}

.col-md-4 {
width: 33.33%;
}
.col-md-6 {
width: 50%;
}

.col-md-12 {
width: 100%;
}
}

/********** Small devices only **********/
@media (max-width: 767px){
.col-md-12 {
float: left;

}

.col-md-12 {
width: 100%;
}
}


HTML

<!DOCTYPE html>

<title>Thai Restaurant Menu</title>
<link rel="stylesheet" href="module2Style.css">

<body>
<h1>Thai Restaurant Menu </h1>

<div class="row">
<div class="col-lg-4 col-md-6 col-md-12">
<p id="p1" >
<br><br>This delicious Thai chicken dinner makes for an exotic weeknight dinner that comes together quickly.
It features traditional Thai flavors like fish sauce, Sriracha, fresh ginger, coconut milk, and cilantro. Use less hot sauce for milder flavor.
A squeeze of fresh lime juice before serving is the crowning touch.
</p>
<div id="Dish1" class="class1">Chicken</div>
</div>

<div class="col-lg-4 col-md-6 col-md-12">
<p id="p2">
<br><br>This exotic, sophisticated, delicious perfection in a crisp lettuce wrap is dipped in a spicy peanut sauce forming a culinary kaleidoscope of
flavors that literally sparkle on the taste buds. And the only cooking required is for the rice.
</p>
<div id="Dish2">Sushi</div>
</div>

<div class="col-lg-4 col-md-12">
<p id="p3">
<br><br>A delicious marinade for flank steak blending the flavors of crushed coriander seed, lime juice, and soy sauce. This marinade can be used well with other meats as well. Serve over rice or shredded Chinese cabbage and red pepper slices.
</p>
<div id="Dish3">Beef</div>
</div>

</div>

</body>

Answer

If you are open to altering your HTML structure this would be much easier to achieve.

The way positioning works is - an absolute element will be positioned relative to the origin location of the closest parent that has position: relative;

So, my idea is create a section and use a header element inside the section. I think this might be much more readable for yourself and portable as well. This way you aren't duplicating information among different CSS id's. Instead I utilize classes to make the CSS more ambiguous allowing it to work on multiple elements.

<div class="col-lg-4 col-md-6 col-md-12">
    <section class="category">
        <h2>Some header</h2>
        ...CONTENT...
    </section>
</div>

CSS

.category {
    position: relative;
}
.category h2 {
    position: absolute;
    top: 0;
    right: 0;
}

/********** Base styles **********/
body{
	align-content: center;
}
* {
  box-sizing: border-box;
}

h1 {
text-align: center;
  margin-bottom: 15px;
}
div{
	position: relative;
}
section {

  border: 3px solid black;
  background-color: #D3D3D3;
  width: 90%;
  font-family: "Arial", Helvetica, sans-serif;
  color: black;
  text-align: justify;
  padding-left:10px;
  padding-bottom:10px;
  padding-right:10px;
  font-size: medium;
  overflow: auto;
  position: relative;
  margin: 10px;
}
.category h2{
	position: absolute;
	top:-12px;
	right:0px;
	border: 2px solid black;
	background-color: white;
	text-align: center;
  font-size: 1em;
  padding: 5px;
}
#Dish2{
	position: absolute;
	top:15px;
	left:385px;
	width:70px;
	height:20px;
	border: 2px solid black;
	background-color: white;
	text-align: center;
}
#Dish3{
	position: absolute;
	top:15px;
	left:385px;
	width:70px;
	height:20px;
	border: 2px solid black;
	background-color: white;
	text-align: center;
}


.row {
  width: 100%;
}
/********** Large devices only **********/
@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
    
  }
  
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-6 {
    width: 50%;
  }
  
  .col-lg-12 {
    width: 100%;
  }
}
/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
    
  }
  
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-6 {
    width: 50%;
  }
  
  .col-md-12 {
    width: 100%;
  }
}

/********** Small devices only **********/
@media (max-width: 767px){
 .col-md-12 {
    float: left;
    
  }
 
  .col-md-12 {
    width: 100%;
  }
 }
<h1>Thai Restaurant Menu </h1>

<div class="row">
	<div class="col-lg-4 col-md-6 col-md-12">
    <section class="category">
      <h2>Chicken</h2>
			<br><br>This delicious Thai chicken dinner makes for an exotic weeknight dinner that comes together quickly. 
					It features traditional Thai flavors like fish sauce, Sriracha, fresh ginger, coconut milk, and cilantro. Use less hot sauce for milder flavor. 
					A squeeze of fresh lime juice before serving is the crowning touch.</section>
	</div> 
	
	<div class="col-lg-4 col-md-6 col-md-12">
		<section class="category">
      <h2>Sushi</h2>
			<br><br>This exotic, sophisticated, delicious perfection in a crisp lettuce wrap is dipped in a spicy peanut sauce forming a culinary kaleidoscope of 
					flavors that literally sparkle on the taste buds. And the only cooking required is for the rice.
		</section>
	</div>
	
	<div class="col-lg-4 col-md-12">
		<section class="category">
      <h2>Beef</h2>
			<br><br>A delicious marinade for flank steak blending the flavors of crushed coriander seed, lime juice, and soy sauce. This marinade can be used well with other meats as well. Serve over rice or shredded Chinese cabbage and red pepper slices.
		</section>
	</div>
	
</div>

Now with all of your code, and the structure above you can use this - https://jsfiddle.net/adjit/uzvfsbmc/3/

section {
  border: 3px solid black;
  background-color: #D3D3D3;
  width: 90%;
  font-family: "Arial", Helvetica, sans-serif;
  color: black;
  text-align: justify;
  padding-left:10px;
  padding-bottom:10px;
  padding-right:10px;
  font-size: medium;
  overflow: auto;
  position: relative;
  margin: 10px;
}
.category h2{
    position: absolute;
    top:-12px;
    right:0px;
    border: 2px solid black;
    background-color: white;
    text-align: center;
  font-size: 1em;
  padding: 5px;
}
Comments