Hello I have a slider in my webpage and I want to place a small box on the top of that slider. How can i achieve this with css positioning?
<div id="slider"></div>
<div id="captionBox"></div>
html
<div class="container">
<div id="slider"></div>
<div id="captionBox"></div>
</div>
css
.container {position:relative}
#captionBox {position:absolute;top:0;left:0}
You can change top and left to px values also e.g 10px. You can also then apply z-index css rules for layering effects
explanation
An absolute positioned element is positioned at an offset to the boundary of its nearest ascendant that has relative positioning. An absolute positioned element is ignored in the flow of an HTML document so you cannot float it
Related
I'm trying to have some elements of design positioned absolutely relative to the page's background but not affecting the page layout (scroll and page height must remain dependent only on the page's contents).
Let say, placing two squares square1 and square2, potentially overflowing on the page's width and maybe below the page's contents.
I've played with the following HTML:
<div id="background">
<div id="inner">
<div id="square1">
</div>
<div id="square2">
</div>
</div>
</div>
<main>
<!-- main content goes here, can be arbitrary HTML -->
<canvas height="1000px" width="10" style="background:red;"></canvas>
</main>
Both with attempts at CSS position: absolute of the squares inside a position: relative background div and overflow: hidden on the inner div ; but also playing with only margin-based positioning, I always end up with the "background" overflowing below the main content. Are there alternatives approach to achieve what I'm trying to do ?
To be more explicit, on this JS fiddle https://jsfiddle.net/1ktfyna4/2/ I'm trying to have the page stop scrolling at the bottom of the red line, while still showing the top of the yellow rectange.
I made it simply using display: flex on the outward-most container, with both the content div and background div inside.
See https://jsfiddle.net/m8pk45re/1/
The layout is quite simple.
<div id="div1">
<div id="div1-child">
</div>
</div>
<div id="div2">
<div id="div2-child">
</div>
</div>
Both childs float right and 100% height of their parents. But the first child is a bit lower, so the second div is pushed left to get the free room for the first. I need div2-child to overlap div1-child. But if I set different z-index to div1 and div2, div1-child just being overlapped by div2 still affecting on div2-child.
I need this to be explained.
Here is the fiddle.
If you give position relative to parent than you have to play second child dive with position absolute.
if you are agree with position absolute with second div child than your working demo is below
jsfiddle.net/2Js5B/2/
I've messed around with a few responsive designs, and I'm curious about what CSS properties determine how float elements are positioned vertically when the overall resolution is reduced and they are scrunched together.
For example, if I have a div block with float:left and a div block with float:right, which of those end up on top when the max width of the container is reduced to the point where they can't fit inline anymore.
If you look at my fiddle, the left side element ends up on top when you reduce the width to the point where they both can't fit. Is there a property that makes it so? Does it do it in order? Is there anything I can add to the right div block that would make it above the left element when width is reduced?
http://jsfiddle.net/JXXLK/
Many thanks SO
The simplest solution to put your right div on top when the window is rescaled is to define it first in your html code:
<div class="container">
<div class="rightside">
RIDE SIDE HOMBRE!
</div>
<div class="leftside">
LEFT SIDE DUDE!
</div>
</div>
I'm not sure how this can be controlled using purely css properties.
How to (top) align 3 div that should be relative to a previous div (but not between them)?
I can't use floats or position:inline-block (if you set display:none on 2 divs the last one shouldn't move).
position:absolute neither because there's a relative footer underneath.
vertical-align:top doesn't work using spans - any workaround?
I tried using a wrapper but it can't work cause the height of the divs is not fixed.
The height of the wrapper gets completely ignored anyway (by the following footer) unless Im using relative children.
Any ideas?
HTML
the order is important and the wrapper is optional (to position the side divs)
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
<div id="footer"></div>
CSS
#left {float:left}
#middle {margin:0 auto}
#right {float:right}
#footer {clear:both}
unless someone comes up with something easier
ill accept my answer in 24h
Hallo I have a Floating Div problem, that I can't understand.
If i write a div with float:left property and an Image tag, both are displayed in a line.
e.g
<div style="background-image:url(calendar_container_bg.gif);background-repeat:repeat-x;width:670px;height:253px;border:1px solid #8E9EAB">
<div style="height:36px">
<div style="float:left;color:#01389F;font:bold 14px Arial;padding-left:20px;line-height:36px;width:614px;">
Frühestes Anreisedatum.
</div>
<img src="calendar_close_btn.gif" style="padding-top:10px">
<div style="clear:left"></div>
</div>
</div>
But as I repleace the image tag with a DIV having the same image as background-image, then both DIV will be displayed on 2 different line. I don't want to use float:left again in second DIV.
img is an inline element (like text or span), so it goes on the same line as any other inline elements (which move to the right if you float a block element to the left).
div is a block element, i.e. each div gets its own vertical space. The only ways to get two divs in one line is:
float them
Make them display: inline