Say I have 3 divs grandParent, Parent, and Child. Though parent's tag is inside the grandParent, using position: absolute; the parent is rendered outside the grandParent.
Now I have a child whose height and width is 100%, it is rendered outside the grandparent.
How to force the child to render inside the grandParent only. I want the green div to be fully inside the red div. And yellow div to remain partially outside the red div.
<html>
<head>
<style>
.grandParent {
width: 600px;
height: 700px;
background-color:red;
}
.parent {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 275px;
background-color: yellow;
border: 2px solid yellow;
transform: translate(417px, -88px) rotate(
0deg
);
}
.child {
height: 275px;
background-color: green;
}
</style>
</head>
</head>
</head>
<body>
<div class="grandParent">
<div class="parent">
<div class="child">
</div>
</div>
</div>
</body>
</html>
You should use position: relative; for the grand parent div. Like this code:
.grandParent {
width: 600px;
height: 700px;
background-color: red;
position: relative; /* add this line */
}
.parent {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 275px;
background-color: yellow;
border: 2px solid yellow;
transform: translate(227px, 9px) rotate(0deg); /* modify this line */
}
Read the documentation for the div positioning.
I was able to achieve this by setting absolute positioning on the child div. Note that I have set arbitrary values to get the child div inside the grandparent div separated from the parent div. Make sure you set the desired width on the child div.
<html>
<head>
<style>
.grandParent {
width: 600px;
height: 700px;
background-color:red;
}
.parent {
position: absolute;
left: 0px;
top: 0px;
width: 360px;
height: 275px;
background-color: yellow;
border: 2px solid yellow;
transform: translate(417px, -88px) rotate(
0deg
);
}
.child {
position: absolute; /* add from here */
left: -370px;
top: 100px;
width: 360px; /* to here */
height: 275px;
background-color: green;
}
</style>
</head>
</head>
</head>
<body>
<div class="grandParent">
<div class="parent">
<div class="child">
</div>
</div>
</div>
</body>
</html>
Related
So what Im trying to achieve is to make a div element stick onscroll to nav header element bottom but they are not in the same parent, also the header dissappear onscroll down and re-appear onscroll up
this is the link to codepen
https://codepen.io/snake220/pen/VwdwpwJ
.red-div {
background-color: red;
width: 100%;
height: 50px;
position: sticky;
top: 0;
}
.green-div {
background-color: green;
width: 100%;
height: 400px;
}
.test2 {
width: 100%;
height: 100px;
}
.blue-div {
background-color: blue;
width: 100%;
height: 30px;
}
<nav class="red-div"></nav>
<div class="green-div">
<div class="test2"></div>
<div class="blue-div"></div>
</div>
so like showin in the code I want the blue div to stick under the red div onscroll.
So, you need to set position: sticky and top equal to the red nav height which equal to 50px like top: 50px;
.red-div {
background-color: red;
width: 100%;
height: 50px;
position:sticky;
top:0;
}
.green-div {
background-color: green;
width: 100%;
height: 400px;
}
.test2 {
width: 100%;
height: 100px;
}
.blue-div {
background-color:blue;
width: 100%;
height: 30px;
position: sticky;
top: 50px;
}
<nav class="red-div"></nav>
<div class="green-div">
<div class="test2"></div>
<div class="blue-div"></div>
</div>
So lets say that I have some document
#a{width: 10px; height: 10px; background: red; z-index: 10;}
#b{width: 100%; height: 100%; background: black; z-index: 5; position: absolute;}
<body>
<div id="a">foo</div>
<div id="b">bar</div>
<body>
The #b div covers the #a, because #b has absolute position.
How can I force #b be behind #a without changing #a position?
You can add position: relative to #a element.
You have to set a position other than static to your first div to apply styles like z-index
#a {
width: 100px;
height: 100px;
background: red;
z-index: 10;
position: relative;
}
#b {
width: 100%;
height: 100%;
background: black;
z-index: 5;
position: absolute;
left:0;
top:0;
}
<div id="a">foo</div>
<div id="b">bar</div>
You should add a relative position to your first div :
<body>
<div id="a">foo</div>
<div id="b">bar</div>
<body>
<style>
#a{width: 10px; height: 10px; background: red; z-index: 10; position:relative}
#b{width: 100%; height: 100%; background: black; z-index: 5; position: absolute;}
</style>
This question already has answers here:
Fixed position but relative to container
(31 answers)
Closed 6 years ago.
I'm trying to make inner div fixed relative to it's parrent div. I made an example of my code on jsfiddle. Problem is when you scroll div. It is no longer on it's position. My html looks like:
<div class="outer">
<div class="inner1">
Lorem ipsum dolor
</div>
<div class="inner2">
</div>
</div>
and css
.outer{
position: relative;
width: 400px;
height: 300px;
border: 1px solid black;
overflow: auto;
}
.inner1{
position: absolute;
width:50px;
height: auto;
border: 1px solid blue;
top: 10px;
right: 10px;
}
.inner2{
width: 500px;
height: 500px;
}
Is there any way to make inner1 fixed relative to outer only using css ?
try this...
<style>
.outer{
position: relative;
width: 400px;
height: 300px;
border: 1px solid black;
overflow: auto;
}
.inner1{
position: fixed;
width:50px;
height: auto;
border: 1px solid blue;
}
.inner2{
width: 500px;
height: 500px;
}
</style>
You can try this:
.inner1 {
position: fixed;
width: 50px;
height: auto;
border: 1px solid blue;
top: 10px;
right: calc(100% - 400px); // 400px is the outer div's width
}
Here is working JSfiddle
<div class="container">
<div class="header">title</div>
<div class="cont_elements">
<div class="element">......</div>
<div class="element">......</div>
<div class="element">......</div>
</div>
and css will be
.header {
position: absolute;
top:0;
/* scrolling out of view :-( */
z-index:2;
background-color:pink;
}
.container {
position:relative;
width:200px;
height:400px;
background:gold;
}
.cont_elements {overflow-y:scroll; height:100%;}
.element {
position: relative;
}
Just change .inner1
.inner1{
position: fixed;
width:50px;
height: auto;
border: 1px solid blue;
margin-top: 10px;
left: 330px;
}
I have tried to create a overlaying footer by adding position:absolute to #container & a Top: XXpx to .panel2 as well as adding a z-index however this does not work any help is greatly appreciated.
https://jsfiddle.net/z3q2wtLf/29/embedded/result/
below is an example of what I'm trying to accomplish
div {
position: absolute;
width: 200px;
height: 200px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}
<div id="div1"></div>
<div id="div2"></div>
<div2> would be the footer? In this case, only <div2> has to get the position: absolute setting. Also, as #Yaakov already wrote, the surrounding container has to have position: relative.
A very basic setup would be:
<div class="wrap_all">
<div class="content">
(content text text text)
</div>
<div class="footer">
(footer text)
</div>
</div>
with the following CSS:
.wrap_all {
position: relative;
}
.content {
background: red;
margin-bottom: 50px;
}
.footer {
position: absolute;
bottom: 0px;
height: 50px;
background: yellow;
}
(The margin-bottom: 50px; on .content is there so that no text or images in .content can be hidden by the footer)
Your #div1 and #div2 should be wrapped within an element with relative position in order to work.
For example:
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
And the css:
#container {
position:relative;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}
Let's say I have four images inside a div. they all have a width of 5.5%
[_o__o__o__o_]
I want to use javascript to change the target that is moused over (hovered on), and have it look like this:
[_o__O__o__o_]
so I made the width of the target increase
however it also pushes the other elements to the side instead of staying where they are so it's more like:
[_o___O___o__o_]
I don't know how to make the other elements stay exactly where they are instead of being pushed.
The issue is that YES I am successfully able to alter the width.
BUT changing the width of one element pushes the surrounding elements to the respective right and left.
jsbin: https://jsbin.com/zujutamazo/edit?html,css,js,output
You can use flexbox for this one:
.wrapper {
display: flex;
display: -webkit-flex;
display: -moz-flex;
width: 400px;
background-color: red;
}
.item {
position: relative;
width: 25%;
height: 200px;
}
.circle {
position: absolute;
bottom: 20px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
background: white;
width: 20px;
height: 20px;
border-radius: 50%;
transition: all .3s;
}
.item1 { background-color: blue; }
.item2 { background-color: red; }
.item3 { background-color: orange; }
.item4 { background-color: yellow; }
.item:hover .circle{
background-color: black;
height: 40px;
width: 40px;
}
<div class="wrapper">
<div class="item item1">
<div class="circle"></div>
</div>
<div class="item item2">
<div class="circle"></div>
</div>
<div class="item item3">
<div class="circle"></div>
</div>
<div class="item item4">
<div class="circle"></div>
</div>
</div>
As I was explaining, you need to set a higher z-index to "be above" the non-hovered boxes. And set negative left-right margins, equivalent to the additional width from hovering to prevent everything from moving around.
Below is a working example, with percentages.
body {
width: 300px;
height: 100px;
}
.myClass {
width: 20%;
height: 50%;
position: relative;
z-index: 1;
float: left;
}
.myClass:hover {
width: 30%;
height: 70%;
z-index: 10;
margin: 0 -5%;
}
body .myClass:nth-child(1) {
background-color: red;
}
body .myClass:nth-child(2) {
background-color: green;
}
body .myClass:nth-child(3) {
background-color: blue;
}
body .myClass:nth-child(4) {
background-color: yellow;
}
<html>
<head>
</head>
<body>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
</body>
</html>