I have a background image, but I need to place a div that its bottom edge should go below the image. What's the easiest way to do this?
Please see the attached image. The white part is the background image and the blue part is my div over the background.
You can create a relative positioned wrapper and then set absolute positioning with bottom: -10%; or bottom: -20px; for a div over a div with image:
.image-with-block-wrapper {
position: relative;
}
.image {
height: 200px;
border: 1px solid #111;
background: url('https://www.gravatar.com/avatar/f42a832da648291bf80206eda08e3332?s=328&d=identicon&r=PG&f=1');
}
.div-over-bg {
border: 1px solid #111;
position: absolute;
height: 50px;
bottom: -10%;
left: 50%;
transform: translateX(-50%);
background: green;
width: 100px;
margin: 0 auto;
}
<html>
<head></head>
<body>
<div class='image-with-block-wrapper'>
<div class='image'></div>
<div class='div-over-bg'></div>
</div>
</body>
</html>
Edit:
In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0;
and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.
So I've created a container with a background image and placed a div inside.
I've given the .block margin: auto; to center it and added position: relative; so I can move it, because it has position: relative; I can add top: 100px; to move it down from the top by 100px
.container {
background-image: url('https://via.placeholder.com/150');
width: 100%;
background-position: cover;
height: 300px;
position: relative;
}
.container .block {
height: 300px;
background-color: blue;
width: 500px;
position: relative;
margin: auto;
top: 100px;
}
<div class="container">
<div class="block">
</div>
</div>
Extra info by #I_Can_Help
In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0;
and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.
Related
Using CSS alone, I am trying to perform a panning behavior on a div that's positioned absolute inside a parent div.
I ultimately want to change the width and height dynamically (zoom in and out behavior). I want to be able to pan (using scrolling) across the whole child div when the size is bigger than the parent.
The child div has bigger width and I expect to scroll to see all 4 edges of it. But, the scroll only happens to the right side and the bottom side. If I have some content in that div – which would be rendered in the top left corner of the div – I can't scroll to it.
.container {
height: 300px;
background: red;
position: relative;
overflow: scroll;
}
.child {
font: 400 14px/17px 'Roboto';
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200%;
width: 200%;
background: black;
opacity: .5;
}
<div class="container">
<div class="child">
Demo Text To Be Shown
</div>
</div>
In this example, the child div has 200% in width and height. I can't scroll to see the left and top edges.
It's just not possible for an element to scroll further up than the top. Here's what you can do instead: give the container some padding so the child isn't off-screen.
.container {
height: 300px;
padding-top: 150px;
padding-left: 50%;
background: red;
position: relative;
overflow: scroll;
}
.child {
position: absolute;
top: 0;
left: 0;
height: 200%;
width: 200%;
background: black;
opacity: .5;
color: grey;
}
<div class="container">
<div class="child">
Demo Text To Be Shown
</div>
</div>
I'm not sure What you want to achieve. I presume you want to see the text:
I amend a bit your CSS:
.container {
height: 300px;
background: red;
position: relative;
overflow: scroll;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-25%, -25%);
height: 200%;
width: 200%;
background: black;
opacity: .5;
color:red;
}
I change transform from -50 to -25 and add color:red. Text appears in the left top corner.
I'm trying to center a text div on top of box div that has inline block. I tried using position: absolute on the text div. But when the browser screen is shrunk or expanded, the positioning of the text div gets messed up. How to fix this?
.mainDiv {
margin: auto;
width: 100%;
padding: 10px;
left: 300px;
text-align: center;
}
.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
}
.text {
background-color: blue;
position: absolute;
top: 70%;
left: 45%;
}
<div class="mainDiv">
<div class="box"></div>
<div class="text">text</div>
</div>
I assume you are using inline-block to center the .box inside the .main-div. Technically, with your current html structure you can't center the .text element on the .box one, but you can center it on .main-div, which is essentially the same thing in your example.
I would start by adding position: relative to .main-div. An absolutely positioned element is positioned based on it's nearest ancestor that has a positioning context. The easiest way to set this is to add position: relative.
Then with your .text element you can adjust to:
.text {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50% );
}
This works because top and left position the top and left element from the top and left of its parent. So the top of .text would start 50% of the way down .main-div, and likewise with left. This would leave your text too far down and to the left.
transform: translate values work differently - they are based on the size of the element itself. So -50% will move an element back half of its width or height. By setting it on both width and height we are moving the .text so that instead of its top and left edges being at 50%, it's center is at 50%.
.mainDiv {
position: relative; /* added to make .text align relative to this, not the document */
margin: auto;
width: 100%;
padding: 10px;
/* left: 300px; (I removed this for demo purposes, but if you need it you can add it back in) */
text-align: center;
}
.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
}
.text {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50% ); /*pull the text left and up 50% of the text's size*/
}
<div class="mainDiv">
<div class="box"></div>
<div class="text">text</div>
</div>
The markup for text should be written first then the box. Then you may try using block instead of inline-block, then set the width of the text to 100 percent, display block and 'margin: 0 auto'. Also, maybe consider using the appropriate semantic tags as opposed to divs if you can. Also, I suspect the top and left rules to be causing the text to not align properly. You should no longer need position:absolute either.
If you want, you can make the blue div a child of the red div so that the blue div will always be relative to the red div. I also added position:relative to the red div, and used transform:translate to the blue div.
If I'm not mistaken, this is also responsive, so try shrinking your browser.
.mainDiv {
margin: auto;
width: 100%;
padding: 10px;
left: 300px;
text-align: center;
}
.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
position:relative;
}
.text {
background-color: blue;
position: absolute;
left: 50%;
transform:translate(-50%, -100%);
}
<div class="mainDiv">
<div class="box">
<div class="text">text</div>
</div>
</div>
.mainDiv {
text-align: center;
}
.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
margin-top: 19px;
}
.text {
background-color: blue;
position: absolute;
margin: -19px 0 0 36px;
}
<div class="mainDiv">
<div class="box">
<div class="text">text</div>
</div>
</div>
everybody
I have problem with responsive map (this is only image not real map). I try to stick div element on this map for example: my mark(div) is on Paris but when I resize window mark is in other country :D I want stick this element for this one country. I try like this:
HTML:
<div class="container-fluid map">
<div class="circle"></div>
</div>
CSS:
.map {
background-image: url(../images/only-map.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 500px;
width: 100%;
position: relative;
}
.circle {
width: 10px;
height: 10px;
background-color: #fff;
position: absolute;
top: 200px;
right: 400px;
float: right;
}
I try with position absolute, fixed. Background size cover,contain, 100% 100%, but still not working.
Thank for every advance
You can do something like this:
HTML:
<div class="map rel">
<div class="dot abs">
</div>
</div>
CSS:
.map{
width: 500px;
height: 500px;
background-color: blue;
}
.dot{
width: 20px;
height: 20px;
background-color: red;
}
.rel{
position: relative;
}
.abs{
position: absolute;
top: 8px;
left: 8px;
}
You can play around with it here. Hope that helps.
you need to use a position in percentage
.circle {
position: absolute;
top: 40%;
left: 50%;
}
but keep in mind that your circle will be centered on it's corner, wich you can prevent by adjusting your percentages and setting:
.circle {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%); //else only the upper-left corner of the circle div will be centered on paris)
}
as it has been said, it's always hard to help without seeing the actual image and result, but this might work
how to make absolute center horizontal and vertical a div with fluid width and height using css?
Thanks in advance for helping.
#div_parent{
background:#ccc;
position:relative;
}
.div_child{
background-color:#338BC7;
position: absolute;
left: 50%;
width: auto;
height: auto;
padding: 20px;
top:25%;
background: blue;
color: white;
text-align: center;
border:1px solid #ccc;
}
<div id="div_parent">
<div class="div_child">
<p>Centered In The Middle Of The Page.</p>
</div>
</div>
A couple of problems with your code:
You do not have a width and height specified on your html and body, without which any of descendent elements wouldn't have a reference to set their positions and/or dimensions in percent units.
You do not have dimensions (width/height) specified on your #div_parent, without which you cannot position its absolutely positioned child (which is relative to it) to the vertical center. Moreover, as you want to position your .div_child to the center of the page, why do you have a parent wrapped around it anyway.
Apart from fixing the above, a trick which is usually used to align elements both horizontally and vertically is to use transform: translate to shift it back by 50%.
Like this:
.div_child {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
...
}
Fiddle: http://jsfiddle.net/abhitalks/Lnqvqnkn/
Snippet:
* { box-sizing: border-box; paddin:0; margin: 0; }
html, body { height: 100%; width: 100%; }
#div_parent{ height: 100%; width: 100%; background: #ccc; position: relative;}
.div_child {
background-color: #338BC7;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: auto; height: auto;
padding: 20px; color: white; text-align: center; border: 1px solid #ccc;
}
<div id="div_parent">
<div class="div_child">
<p>Centered In The Middle Of The Page.</p>
</div>
</div>
When I need fluid width, I prefer using this method:
CSS
.background { display: table; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.background > div { display: table-cell; vertical-align: middle; text-align: center; }
HTML
<div>
<div>
<p>Centered In The Middle Of The Page.</p>
</div>
</div>
Demo on jsfiddle.
Hope it works for you.
I am trying to create a div that is covers the browser window diagonally. See example here:
This is my CSS:
.shape {
height: 100%;
width: 150%;
transform: rotate(25deg);
}
This is my actual result:
I've tried a bunch of different things using transformOrigin and setting top and left of the div, but nothing seems to work to have this div centered diagonally across the browser.
You need to add these: transform-origin: center;
Also when width is more than 100% you need to move content its centered before rotate. Like Position: absolute; left: -25%;
body {
padding: 0px;
margin: 0px;
}
.frame {
width: 100vw;
height: 100vh;
background: #EFEFEF;
}
.rotated {
position: absolute;
left: -25%;
width: 150%;
height: 100%;
border: 2px solid blue;
transform: rotate(25deg);
transform-origin: center;
}
<div class='frame'>
<div class='rotated'></div>
</div>