I have main outer div.
----Inside that I have outer div
--------and inside that I have inner search menu div
--------and search menu content list div
Now I have given fixed position to inner search menu div.
When I scroll outer div part It's position is fixed correctly.
The problem is when I scroll the main div [outer most]then also menu item div is still fixed and it is not scrolling with its outer div.
How can I make it scroll with outer div.
.main{
width:600px;
height: 700px;
border:1px solid black;
position:relative;
}
.outer{
width:500px;
height: 500px;
border:1px solid black;
position:relative;
overflow:scroll;
}
.inner{
width:400px;
height: 40px;
border:1px solid black;
position:fixed;
}
.content{
margin-top:45px;
height:600px;
border:1px solid red;
width:100px
}
<html>
<head>
</head>
<body>
<div class="main">
<div class="outer">
<div class="inner">
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>
You could use position: sticky instead of fixed and define top and left:
.inner {
...
position: sticky;
top: 0;
left: 0;
}
In this case .main doesn't need a position.
Working example:
.main {
width: 600px;
height: 700px;
border: 1px solid black;
}
.outer {
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
overflow: scroll;
}
.inner {
width: 400px;
height: 40px;
border: 1px solid black;
position: sticky;
top: 0;
left: 0;
}
.content {
margin-top: 45px;
height: 600px;
border: 1px solid red;
width: 100px
}
<div class="main">
<div class="outer">
<div class="inner"></div>
<div class="content"></div>
</div>
</div>
You could also use position: absolute and define top and left:
.inner {
...
position: absolute;
top: 0;
left: 0;
}
In this case you have to define position: relative for .main but not for .outer.
Working example:
.main {
width: 600px;
height: 700px;
border: 1px solid black;
position: relative;
}
.outer {
width: 500px;
height: 500px;
border: 1px solid black;
overflow: scroll;
}
.inner {
width: 400px;
height: 40px;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
}
.content {
margin-top: 45px;
height: 600px;
border: 1px solid red;
width: 100px
}
<div class="main">
<div class="outer">
<div class="inner"></div>
<div class="content"></div>
</div>
</div>
Related
Hello Stackoverflow Team,
How can the child div inside the parent div with overflow have a right and left margin? I'm trying to solve the issue but it does not give a clean solution for it.
Attempt:
margin-right wont work
div {
border: 1px solid black;
}
.parent {
width: 300px;
height: 300px;
margin: auto;
position: relative;
overflow: auto;
}
.child {
width: 350px;
height: 150px;
top: 50px;
margin-left: 20px;
margin-right: 20px;
position: absolute;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
My unclean Solution:
div {
border: 1px solid black;
}
.parent {
width: 300px;
height: 300px;
margin: auto;
position: relative;
overflow: auto;
}
.child {
width: 350px;
height: 150px;
top: 50px;
margin-left: 20px;
border-right: 20px solid red;
position: absolute;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
any better way to solve the issue?
Since you are using position: absolute for the child, best way to achieve what you want is remove position: absolute then add the margins you need.
div{
border: 1px solid black;
}
.parent {
width:300px;
height:300px;
margin:auto;
position: relative;
overflow: auto;
}
.child {
width:350px;
height:150px;
top: 50px;
margin: 50px 20px 0;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
Update
If you need the child div to be position: absolute you will have to wrap it in another div as follow:
div{
border: 1px solid black;
}
.parent {
width:300px;
height:300px;
margin:auto;
position: relative;
overflow: auto;
}
.child {
border-color: red;
position: absolute;
top: 20px;
height: 150px;
}
.sub-child {
width:350px;
height:150px;
margin: 0 20px;
display: inline-block;
}
<div class="parent">
<div class="child">
<div class="sub-child"></div>
</div>
</div>
I have created a slideshow and to the right of it there are divs, they will be enlarged when you hover over them and when you take your cursor off the div it will shrink. But, the aside (the divs parent) is in the correct place where it should be, it's the divs that aren't filling the top of the aside element. How can I get the divs to fill the aside element and not break anything else?
.thing {
height: 120px;
width: 250px;
z-index: 10;
position: relative;
border: 5px solid brown;
}
.thing:hover {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 11;
}
.report {
text-align: left;
vertical-align: top;
display: table;
width: 100%;
}
.aside {
display: table-cell;
padding-top: 5px;
width: 250px;
border-radius: 10px;
border: 2px solid black;
overflow: hidden;
position: relative;
height: 385px;
}
.container {
position: relative;
width: 750px;
height: 400px;
border-radius: 5px;
border: 1px solid black;
overflow: hidden;
}
<div class="report">
<div id="imgGallary" class="container">
<img src="images/companies.png" alt="" width="750" height="400" />
<img src="gallery" alt="" width="750" height="400" />
</div>
<aside class="aside">
<div id="c1"></div>
<div class="thing" style="background-color: blue;">
<h1>Find Us!</h1>
</div>
<div class="thing" style="background-color: orange;"></div>
<div class="thing" style="background-color: pink"></div>
</aside>
</div>
Your CSS layout is confusing display: table and display: relative. They aren't compatible like you have them. The preferred way to layout your .container and the aside would be to use floats. I revised your example to float those two containers next to each other (roughly at a 80/20 split for the width). This has the added bonus of making your layout responsive.
Working codepen:
http://codepen.io/staypuftman/pen/vKoPmw
.thing {
height: 120px;
width: 250px;
position: relative;
border: 5px solid brown;
}
.thing:hover {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.report {
text-align: left;
vertical-align: top;
display: table;
width: 100%;
}
.aside {
padding-top: 5px;
width: 18%;
border-radius: 10px;
border: 1% solid black;
overflow: hidden;
float: left;
position: relative;
height: 385px;
}
.container {
float: left;
width: 80%;
height: 400px;
border-radius: 5px;
border: 1px solid black;
overflow: hidden;
}
I would like my inner div to be on the bottom-right corner of the outer div, by using float: right, but for some reason, it'll staying on the bottom-left corner. What am I doing wrong?
#outer {
width:100%;
height:20%;
border: 1px solid black;
position: absolute;
}
#inner {
width: 50px
height: 50px;
border: 1px solid red;
position: absolute;
float: right;
bottom: 0;
}
<div id = 'outer'>
<div id = 'inner'>
bottom-right corner;
</div>
</div>
Add right: 0 instead.
Floating the element won't have any effect on it if it's absolutely positioned.
#outer {
width: 100%;
height: 20%;
border: 1px solid black;
position: absolute;
}
#inner {
width: 50px height: 50px;
border: 1px solid red;
position: absolute;
bottom: 0;
right: 0;
}
<div id='outer'>
<div id='inner'>
bottom-right corner;
</div>
</div>
change css property for outer div as below:
#inner {
width: 50px
height: 50px;
border: 1px solid red;
position: absolute;
bottom: 0;
right:0
}
I want to create a css class for loading operations. I have div panels that contains ajax request operations. I will overlay loading blur on panel. but not working. This is my working code
Text and buttons not appearing under the loading incon. my transparent is 0.4
.main{
height: 250px;
width: 300px;
border: solid 1px red;
overflow: hidden;
float:left;
margin-right:10px;
}
.medium{
height: 250px;
width: 100px;
border: solid 1px blue;
overflow: hidden;
}
.loading {
position:relative;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 205, 205, 205, 0.4 )
url('http://www.easyshopindia.com/images/loading.gif')
50% 50%
no-repeat;
}
body .loading{
display:block;
overflow:hidden;
}
<div class="main">
<div class="loading">
</div>
<button>show images</button>
<p>This is my paragraph.</p>
</div>
<div class="medium">
<div class="loading">
</div>
<button>show info</button>
<p>hello this is small box</p>
</div>
i think you want to set loading as overlay, for that you have to give the parent element as position: relative and give child loading element position: absolute to fill the parent element.
.main{
height: 250px;
width: 300px;
border: solid 1px red;
overflow: hidden;
float:left;
margin-right:10px;
position: relative;
}
.medium{
height: 250px;
width: 100px;
border: solid 1px blue;
overflow: hidden;
position: relative;
}
.loading {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 205, 205, 205, 0.4 )
url('http://www.easyshopindia.com/images/loading.gif')
50% 50%
no-repeat;
}
See this updated jsfiddle :- http://jsfiddle.net/pvvo7kre/7/
How I can make a box to be fixed within a div with scroll?
I'm trying like this:
HTML:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
CSS:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -250px;
background: black;
}
But the box is going along with the page, not only within the div.
What am i doing wrong here??? Can someone show me the way?
Thank you guys.
EDIT
Example -> https://jsfiddle.net/kzhuh7sv/embedded/result/
Try this solution https://jsfiddle.net/yyt8eope/2/
I added a div that wraps both the container div and the class='test' div at the same level so the test div can be absolute inside the wrapper and be always at a fixed position
<div id="wrapper">
<div class="main">
<div class="scroll-container">
<div class="container">
<div class="container2">
</div>
</div>
<div class="test">Fixed inside scroll container</div>
</div>
</div>
</div>
CSS:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.scroll-container{
position: relative;
height: 500px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 200px;
color: white;
position: absolute;
top:0;
left: 50%;
margin-left: -250px;
background: black;
z-index: 1;
}
Try getting rid of 'position: fixed;' and add this 'overflow: scroll;'.
JSFiddle.
EDIT
Changed the JSFiddle, has been updated.
You can't do it with position: fixed since it always ties to the viewport. You want it fixed within it's context.
http://jsfiddle.net/zq1m49wf/2/
The black box stays in place as container3 scrolls
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="container3"></div>
</div>
<div class="test"></div>
</div>
</div>
</div>
#wrapper {
position: relative;
width: 100%;
height: 100%;
}
.main {
width: 100%;
height: 100%;
}
.container {
position: relative;
height: 500px;
padding-top: 200px;
}
.container2 {
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container3 {
height: 1500px;
}
.test {
width: 500px;
height: 500px;
bottom: 0;
background-color: #000000;
position: absolute;
}