I have the following HTML code:
<div class="outer_container">
<div id="imgContainer">
<img src="/some/image" />
</div>
<div id="slogan">
<span class="quote">Some text here</span>
</div>
<div id="footer" class="gray_top_border">
Some text here
</div>
</div>
And this is my CSS:
.outer_container {
background-color:#FFFFFF;
margin:0 auto;
width:960px;
}
#slogan {
font-size: 3em;
position: relative;
z-index: 999;
bottom: 50px;
left: 50px;
}
#footer {
border-top:1px solid #B5B5B5;
min-height:50px;
padding:10px;
}
Using this code, I get a 3em gap between image and footer.
If I change position from relative to absolute, the gap problem is gone. But then the top / left position is relative to the browser window, and not within the DIV container.
How can I float text over the image without creating this gap?
This does it:
#slogan {
font-size: 3em;
position: relative;
height: 0;
overflow: visible;
z-index: 999;
bottom: 50px;
left: 50px;
}
can you try the below css.
#slogan {
font-size: 3em;
position: relative;
z-index: 999;
margin-top:-20px;
}
#footer {
position:absolute;
bottom:10px
border-top:1px solid #B5B5B5;
min-height:50px;
padding:10px;
}
"Position: relative" still reserves the area the text would have been in. This means it can make some weird padding/margin issues once in a while.
"position: absolute" does not reserve the area. I recommend just using that instead of hacking around with the relative one.
http://www.w3schools.com/css/css_positioning.asp
You can wrap the whole thing in a new div that's position: relative then your absolute pixels will go out from that instead of screen 0,0.
"An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is ."
Related
Hi
I want to place the div2 top align with the div1's border
So far I have tried this for div 2 but it did not work out well
element.style {
float: right;
position: relative;
vertical-align: top;
}
this did not align the div at top position , what could be the fix to make it top aligned?
I would achieve this using position: absolute; on the child like said before, but instead of adding an additional div to the DOM to simulate use the space , I would use a pseudo-element (more precisely, the ::before pseudo-element).
This is the structure I used for it:
<div class="parent">
<div class="child">
</div>
<h1>Start</h1>
</div>
The div with class parent needs to be position: relative;, and the child needs to be absolute to it and set to be top: 0; like the following lines explain:
.child {
position: absolute;
top: 0;
width: 100%;
height: 100px;
background-color: #000;
}
You will though need to set this element a fixed height and width, otherwise it will not work.
The problem of this approach is that you will have a div that will be over the first 100px of your .parent div.
To solve this we need to create a pseudo-element on the .parent div that will simulate that space and make everything work better:
.parent:before {
display: block;
content: ' ';
width: 100%;
height: 100px;
}
Here's a working fiddle with a sample code, hope this helps you!
http://jsfiddle.net/m54rxwjv/2/
PS: This will only work if you know that the height will always be 100px.
Give position relative to your parent div and position absolute to inner div. Don't forget to set top:0px for inner div and after this your inner div will be always at the top of your parent div.
#div1{position:relative;}
#div2{position:absolute;top:0px;}
As per Vipul's answer, I have create code snipped on jsfiddle for same behaviour:
http://jsfiddle.net/zo6jdp4b/1/
I have put one extra div on the top also so that one do not have any issue in child Div css:
.childDiv{
border: 1px solid blue;
height: 10px;
width: 30px;
position:absolute;
top: 0px;
}
Set your top div inside another div with sticky.
Like:
.div2 {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
It should be placed as your div2 in your div1 element in which you have (for example) overflow-y: scroll on a set height (and bellow content to be vertically scrolled).
.div1{
box-sizing: border-box;
border: 3px solid red;
height: 150px;
width: 30px;
}
.div2{
box-sizing: border-box;
border: 3px solid green;
margin: -3px;
height: 30px;
width: 30px;
}
<div class="div1">
<div class="div2"></div>
</div>
.div1{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:relative;
}
.div2{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:relative;
top:0;
left:0;
}
div2 always at the top
I have this:
div#myImg{
background: url('myimage.png') left top no-repeat;
}
div#myImg:after{
content: 'TEXT UNDER IMAGE';
margin:0 auto;
vertical-align:text-bottom;
font-size: 14px;
}
.dm_lp_imgs{
width: 100px;
float:left;
height: 115px;
margin-right: 15px;
}
<div id="myImg" class="lp_imgs"></div>
I know you can add text with the :after pseudo selector, but I want to position that text, centered, just below my image.
Can I do that with the :after pseudo selector?
At the moment, the text seems stuck to the top of the div#myImg DIV.
UPDATE:
display:block
Doesn't do the trick...
Usually I use CSS position to do that sort of thing. Make the parent position:relative, add position:absolute to the ::after element, and give it a top:100%
http://jsfiddle.net/s22Af/
div#myImg:after{
content: 'TEXT UNDER IMAGE';
margin:0 auto;
vertical-align:text-bottom;
font-size: 14px;
position:absolute;
top: 100%;
text-align: center;
}
.dm_lp_imgs{
width: 100px;
float:left;
height: 115px;
margin-right: 15px;
position: relative;
}
You can position pseudo elements absolutely relative to the parent. Add position: relative to the div and position: absolute to the :after CSS, then position using usual methods. I've done a quick fiddle of it here: http://jsfiddle.net/5s3Fr/
I don't know your requirements but if you're coding for modern browsers/html5 you should look into the <figure> and <figcaption> html tags
For your consideration: FIDDLE
Markup:
<figure id="myFigure">
<div id="myImg" class="dm_lp_imgs"></div>
<figcaption>text under image</figcaption>
</figure>
CSS
.dm_lp_imgs {
width: 100px;
height: 115px;
}
#myFigure {
float:left;
margin-right: 15px;
width: 100px;
}
#myImg { background: url('myimage.png') left top no-repeat; }
#myImg + figcaption {
/* Style caption here */
text-align:center;
text-transform:capitalize;
}
I'm curious whether it's possible with CSS to have a <div> overlaying the <div> above and below, like so:
I've tried to use margin-top: -40px;, but that doesn't seem to work. I've tried position:relative; without any luck, either. Any ideas?
Thanks!
Sure!
Demo Fiddle
The trick is managing the positioning of your divs, then setting the offset (top) correctly for the div you want overlapping.
<div></div>
<div>
<div></div>
</div>
CSS
div {
width:100%;
height:100px;
position:relative; /* ensure the parent divs have a position set */
}
div:first-child {
background:red;
}
div:last-child {
background:blue;
}
div:last-child div {
opacity:.5;
height:50px;
background:white;
position:absolute; /* position relative to the parent */
top:-25px; /* position the top to -25px (half its height) above the top of the parent */
}
There are many ways to do this:
With all div's absolutely positioned
You can use position: absolute to achieve this. This is better if you are trying to build a web app as it sticks to the edges of the screen.
Fiddle here
HTML
<div id="top-section"></div>
<div id="banner-section"></div>
<div id="btm-section"></div>
CSS
div {
position: absolute;
left: 0;
width: 100%;
}
#top-section {
top: 0;
bottom: 50%;
background: red;
}
#btm-section {
top: 50%;
bottom: 0;
background: blue;
}
#banner-section {
height: 100px;
margin-top: -50px;
top: 50%;
background: rgba(255,255,255,0.5);
z-index: 2;
}
With the #banner-section relatively positioned
You mentioned that you tried relative position. This is how you can achieve what you were trying to do. In this case, you want the #banner-section to be nested inside the #btm-section:
Fiddle here
HTML
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
position: relative;
top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
With a negative margin on #banner-section
You also mentioned that you tried using a negative value for the margin-top. Here is a working example of that:
Fiddle here
HTML
(Also nested)
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
margin-top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
You can also have it poking out of the top section
If the #top-section is static and the bottom section can extend past the bottom of the page, this might be the best option for you.
Fiddle here
HTML
<div id="top-section">
<div id="banner-section"></div>
</div>
<div id="btm-section"></div>
CSS
#banner-section {
position: absolute;
bottom: -50px;
z-index: 2;
height: 100px;
background: rgba(255,255,255,0.5);
}
Without further details you can do it as follows:
JSFiddle Example
HTML
<div class="top-section"></div>
<div class="banner-section"></div>
<div class="btm-section"></div>
CSS
.top-section{
height:60px;
background-color:red;
}
.btm-section{
height:60px;
background-color:blue;
}
.banner-section{
position:absolute;
z-index:1;
margin-top:-20px;
height:40px;
width:100%;
background-color:rgba(255,255,255,0.5);
}
End Result
The trick here is to have the middle div banner-section positioned absolutly, and with a margin-top value negative corresponding to half its height, giving us this end result:
Explanation
Since the element with the CSS class .banner-section gets positioned absolutely, it will rise above in the document stack order. So the elements .top-section and .btm-section stay one after the other.
An element with position:absolute will then need some extra css to keep up with the desirable appearence, like a width declaration and a height declaration to set its size.
Check if this one helps you
http://codepen.io/anon/pen/EJBCi.
<div class="outer">
<div class="topSec"></div>
<div class="midSec">Midcontent</div>
<div class="btmSec"></div>
</div>
CSS
.outer {
position: relative;
height: 400px;
text-align: center;
}
.topSec {
height: 50%;
background: red ;
}
.btmSec {
height: 50%;
background: yellow ;
}
.midSec {
position: absolute;
background: rgba(255,255,255,0.7);
z-index: 1;
top: 50%;
height: 60px;
margin-top: -30px;
left: 0;
right: 0;
line-height: 60px
}
I'm trying to position an image to the right within a container. However, after I set my parent container to position: relative;, my image disappears. Any ideas? Website: http://andrewgu12.kodingen.com/. Thanks!
CSS:
.slide {
padding-top: 138px;
background-attachment: fixed;
width: 100%;
height: 100%;
position: relative;
box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
div#inner-container {
text-align: left;
width: 960px;
margin: 0 auto;
padding: 0;
white-space: normal;
position: relative;
}
div#name {
right: 0;
bottom: 200px;
position: absolute;
}
HTML:
<div class="slide" id="home" data-slide="1" data-stellar-background-ratio="1">
<div id="inner-container">
<div id="name" clas="row">
<img src="images/names.png">
</div>
</div>
</div>
It does not disappear, it just goes all the way up and out the monitor xD You have to remember that when you use position: absolute the object is going to look for a parent that has position: relative to position itself. When you add position: relative to div#inner-container it changes the div#name.row reference. Maybe adding height: 100%; to the parent div might do the trick for what you want?
Try this:
div#name {
position:fixed;
right: 0px;
bottom: 200px;
}
I Solved it! The parent div that has position:relative actually goes really high up the monitor. So you need to set the the top style to 0px and play around with the top,bottom,right,left styles that come with position relative. So basically add (top: 0px) to your css styling.
Hello
please have a look at my jsfiddle.
The content of the inner div-element is scrollable.
Each grey symbol has a margin-left. When I scroll the content the symbols shouldn't be fixed to the background.
It should be scrollable with the position.
Have you got an idea how I achieve that effect?
Keep in mind that positioning is relative to the closest positioned parent.
When you are assigning an absolute position to the "symb" class you are positioning them relative to the document rather than their parent.
Simply adding "position: relative;" to your div.tl element will set the parent div as positioned without moving it and the "symb" elements will act the way I think you expect them to.
Your new .tl definition should be:
.tl {
width: 500x;
height: 80px;
background-color:grey;
position: relative;
}
Furthermore, I'm assuming that you have some need to position these absolutely. You could achieve similar results by simply removing the "position: absolute" portion of your .symb definition.
You are setting a margin, not a position, so you don't need to bother with positioning at all in your example case.
I am not sure what do you need. You had an error in your last "symb" - you missed 'p' in 'px'. Try this?
<div class ="outer">
<div class="inner">
<div class="tl">
<div class="box" style="width: 315px;">
<div class="symb" style="margin-left: 0px;"></div>
<div class="symb" style="margin-left: 15px;"></div>
<div class="symb" style="margin-left: 20px;"></div>
</div>
</div>
</div>
</div>
.outer {
width:50%;
}
.inner {
overflow-x:scroll;
}
.tl {
width: 500x;
height: 80px;
background-color:grey;
}
.box {
float: left;
height: 61px;
}
.box .symb {
float:left;
width: 5px;
height: 5px;
background-color: #cccccc;
z-index: 999;
margin-top: 10px;
}
Use
position: relative;
Not
position: absolute;
Just try with the following CSS:
.box .symb {
position: relative;
float: left;
position: inline-block;
width: 5px;
height: 5px;
background-color: #cccccc;
z-index: 999;
margin-top: 10px;
}