I'm trying to place 'blue' at the bottom of the parent container 'green'. I've tried following this answer, but can't get it to work. I want the blue div to be at the bottom of the green div.
#green {
position:relative;
width:auto;
height:200px;
background-color:green;
}
#blue {
position:absoloute;
bottom:0;
height:75px;
width:auto;
background-color:blue;
}
<div id="green">
<div id="blue"></div>
</div>
Thanks.
1- You need to change position absoloute to absolute of #blue, then after width auto to width 100%.
#blue {
position: absolute;
bottom: 0;
height: 75px;
width: 100%;
background-color: blue;
}
Here is an working example for you http://codepen.io/saorabhkr/pen/BoQjvN
Related
Quick and easy question. I'd like to have a floating box that stays in the bottom right of a div (in HTML). How would I do this with css?
Thanks! (attached is what I want it to look like)
Hope this will be what you are looking for.
.navBar {
height: 100px;
background-color: blue;
}
.div1 {
position: relative;
height: 200px;
}
.div1 .box {
position: absolute;
bottom: 40px;;
right: 40px;;
width: 200px;
height: 40px;
background-color: red;
}
.div2 {
height: 100px;
background: green;
}
<div class="main-container">
<div class="navBar"></div>
<div class="div1"><div class="box"></div></div>
<div class="div2"></div>
</div>
what you're looking for is:
position:absolute;
bottom:0;
right:0; which will position things relative to the positioned parent.Note that the parent element (div) needs to have its position set as well. Most people do position:relative;
The values bottom:0 and right:0 means to move it 0px away from the bottom of the parent and 0 px away from the right side of the parent.
See the following w3schools for further information:
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
At my site I have a block with image as background and title above the image:
html
<div class="block">
<img src="someimage.png" />
<div class="title">Some title</div>
</div>
css
.block {
position:relative;
}
.block img {
position:absolute;
top:0;
left:0;
}
.block .title {
margin-top:100px;
text-align:center;
}
Requirements for the .block:
I cannot change <img> with <div style='background-image:url(someimage.png)'> - it must be <img>
.title must be relative
But the problem - absolute div hides the title. . Playing with z-index do nothing just because z-index does not work with relative elements. So my question - how can I organize this block. Any advices will be very apprecated!
z-index does work with relative positioning. Just set the .title to relative (or inherit since its parent is relative) and add a z-index
Per http://www.w3.org/wiki/CSS/Properties/z-index
Only works on positioned elements(position: absolute;, position: relative; or position: fixed;)
CSS
.block {
position:relative;
width: 100px;
}
.block img {
position:absolute;
top:0;
left:0;
}
.block .title {
margin-top:100px;
text-align:center;
color: #FFF;
position: relative;
z-index: 1
}
FIDDLE
I have an image in the center of a div
The image is centered in the parent div using the following css:
img { margin:0px auto; }
The image can have arbitrary dimensions.
How can I position the Magnifying Glass (zoom) image on top left of the image without using Javascript, while the main image can have any width or height?
User position:relative and position:absolute. Look at the following HTML and CSS.
HTML
<div class="parent">
<div class="test"><img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" border="0" />
<img src="http://www.beyotta.net/images/icon_magnifier.png" border="0" class="absimg" />
</div>
</div>
CSS
.parent {width:100%; height:400px; border:1px solid blue; text-align:center;}
.test
{
display:inline-block;
position:relative;
}
.absimg
{
position:absolute;
top:5px;
left:5px;
}
FIDDLE DEMO
Giving a position relative to the image and absolute to the magnifying glass image would do the trick here's the demo on what I've done.
http://jsbin.com/yumelamive/5/edit?html,css,output
i am not sure it will work or not but try using before will help
img:before {
content: 'img/zoom.png ';
position:absolute;
top:0px;
left:0px;
}
for proper help atleast provide a jsfiddle or code of your work
Try Use this
jsfiddle
div{
content:"";
display:block;
height:300px;
width:300px;
border:solid 1px #CCCCCC;
background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg");
position: absolute;
}
div:before {
content:"";
background-image: url("http://icons.iconarchive.com/icons/icontexto/search/48/search-red-icon.png");
top:0;
left:0;
position:absolute;
width: 40px;
height: 48px;
}
I would make a div for the image, set the background the image and add:
position: relative;
for that div. Then put the magnifying glass within the div and set:
position: absolute: top: 0; left: 0;
.image {
background: url(eiffel.jpg);
position: relative;
width: 100px;
height: 200px;}
.image img {
position: absolute;
top: 0;
left: 0:}
The 'relative' is what any 'absolute' objects..relate to.
I hope that helps.
set the image Magnifying Glass to absolute:positionand use left: right: for right position then the parent div set to position:relative
I want to display a loader inside the container. I am trying to display the overlay div inside the container.
if I use absolute position, the overlay also going top.
Here is Fddle : http://jsfiddle.net/vaykmry4/5/
Code :
<style>
.container
{
margin: 25%;
position:relative;
width:200px;
height:200px;
border:3px solid #ddd;
overflow:auto;
}
.overlay {
width:100%;
height:100%;
margin:auto;
left:0;
top:0;
position:absolute;
background:#fff;
opacity:.8;
text-align:center;
}
.loader {
display:inline-block;
}
</style>
<div class="container">
<div class="overlay">
<span class="loader">
loading...
</span>
</div>
<div class="content">Here is content ... <div>
</div>
Thanks.
First of all I should note that a fixed element is positioned relative to the initial containing block which is established for the html element.
Hence you should use absolute positioning to position the overlay relative to its nearest containing block which is established by the container.
.container {
position: relative;
overflow: auto;
}
.overlay { position: absolute; }
Second, It will work until the content start growing. When the content height gets bigger than the overlay, the overlay will not fill the entire space of the container anymore.
Since you may use JavaScript in order to to display the overlay (including loading, etc.) one solution is to add overflow: hidden; to the container to prevent from scrolling.
Finally, you should set top property of the .overlay element according to the position of the vertical scroll-bar.
Here is the jQuery version of the above approach:
var $container = $(".container");
$(".overlay").fadeIn().css("top", $container.scrollTop() + "px");
$container.css("overflow", "hidden");
EXAMPLE HERE
You are using margin: 25% on container which is causing the gap of 50% top-bottom value for overlay, so use height: 150% instead of 100%
.container
{
margin: 25%;
position:relative;
width:200px;
height:200px;
border:3px solid #ddd;
overflow:auto;
}
.overlay {
width:100%;
height: 150%;
margin:auto;
left:0;
top:0;
bottom: 0;
right: 0;
position:absolute;
background:#000;
opacity:.5;
}
.content {
height:300px;
}
working fiddle
position: absolute will let you place any page element exactly where you want it with the help of top right bottom left attributes. These values will be relative to the next parent element.
position: fixed is a special case of absolute positioning. A fixed position element is positioned relative to the viewport.
In your case you should use position: absolute for your .overlay
Use this:
HTML:
<div class="container overlay">
<div class="content"><div>
</div>
CSS:
.container
{
margin: 25%;
position:relative;
width:200px;
height:200px;
border:3px solid #ddd;
overflow:auto;
}
.overlay {
margin:auto;
left:0;
top:0;
position:relative;
background:#000;
opacity:.5;
}
.content {
height:300px;
}
Here is the working fiddle
We've hit a complete wall with this one, even though we think the solution is quite easy ...!
We have a responsive container div with width 100% and overflow:hidden. This container has a centered margin 0 auto div 'A' with fixed width 950px.
We want to place a max-width container 'B' next to this container with right:-3000px to place it off screen.
We will then use jQuery to animate opacity:0 the first container and animate right:0px the second container, bringing it in nicely from the right of the screen.
However, container B will not line-up next to the container A. It get's placed to the bottom right of the first container.
What do we need to do to get container B to line up next to container A?
Thanks in advance for any help! Here's the code:
HTML:
<div id="container">
<div id="A">Some content</div>
<div id="B">Some content</div>
</div>
CSS:
#container {
float: left;
overflow: hidden;
width: 100%;
}
#A {
margin: 0 auto;
max-width: 950px;
position: relative;
}
#B {
max-width: 715px;
padding-left: 220px;
position: relative;
right: -3000px;
z-index: 999;
}
change #B div's position to position:absolute;
Demo here
<div id="container">
<div id="A">A Some content</div>
<div id="B">B Some content</div>
</div>
<script type="text/javascript">
$( "#B" ).animate({
right: 0,
opacity: 1
}, 1500, "linear", function() {
alert( "all done" );
});
</script>
<style type="text/css">
#container {
overflow: hidden;
width: 100%;
height:50px;
position:relative;
background-color:orange;
}
#container > div {
position:absolute;
}
#A {
top:0;left:0;
margin: 0 auto;
max-width: 950px;
}
#B {
max-width: 715px;
padding-left: 220px;
right: -3000px;
z-index: 999;
background-color:green;
opacity:0.5;
}
</style>
Your issue is that you are simply animating the opacity of your first element, when this hits zero, although you cant see it- it is still present within the document layout with its original dimensions. Because B is below it in the DOM, when it slides in, it will be below the space taken by the (albeit) invisible A.
You may want to set display:none on A after the animation completes, or alternatively set its height to zero. This will ensure that as well as fading out, it isnt taking up space as you are anticipating, meaning B can assume the anticipated position.
You may want to use fadeOut(); on A instead of animating its opacity, this will automatically also apply display:none;
Pure CSS 'on hover' solution:
Demo Fiddle
HTML
<div class='wrapper'>
<div></div>
<div></div>
</div>
CSS
.wrapper {
position:relative;
}
.wrapper div:first-of-type {
height:200px;
width:100%;
background:blue;
position:relative;
opacity:1;
transition-delay:0;
transition-duration:1s;
transition-property:opacity;
}
.wrapper div:last-of-type {
height:200px;
position:absolute;
top:0;
left:0;
width:100%;
background:red;
width:100%;
max-width:0;
transition-delay:1s;
transition-duration:1s;
transition-property:max-width;
}
.wrapper:hover div:first-child {
opacity:0;
}
.wrapper:hover div:first-child + div {
max-width:100%;
}