It may sound a stupid question but I need this div2 behind the div1. But div2 is inside div1 and I need it this way. I tried with z-index but for some reason doesn't work. I even declared its position.
I want to display back-sq-1 behind the box-ft1.
Note that is not possible changing the order of divs, so obviously it would be much easier.
Here is the code:
HTML
<div class="box-ft1">
<span class="back-sq-1"></span>
</div>
CSS:
.box-ft1{
position: absolute;
z-index: 250;
background-color: white;
height: 230px;
width: 400px;
right: 5%;
top:15%;
}
.back-sq-1{
display: block;
z-index: 0;
top: -15px;
left: -15px;
width: 50%;
height: 50%;
position: absolute;
background-color: #a36103;
}
Related
I'm trying to "shape" divs by using a div over the other div in order to hide parts of it. I am posting my code below.
Is there a pure CSS way to hide certain elements under a div without hiding the background in a transparent div?
In my example, I would like for the circle to be fully transparent (it's semi-transparent for easier visual purposes) and to hide the part of the square it overlaps.
.square {
background: rgba(134,95,96,1.00);
height: 500px;
width: 500px;
position: absolute;
bottom: 20%;
right: 20%;
min-height: 500px;
min-width: 500px;
}
.circle {
background: rgba(141,76,147,0.50);
border-radius: 50%;
position: absolute;
top: 50%;
bottom: 20%;
right: 33%;
height: 500px;
width: 500px;
z-index: 1;
}
<div class="square"><p>Square</p></div>
<div class="circle"><p>Circle</p></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
I'm trying to create something in JQuery Mobile, however I need to be able to position a button from the center. Right now, the button is positioned from the top-left corner, and as such if I resize the window, everything is horribly off-center.
<body>
<button>Button</button>
<div />
</body>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
button {
position: absolute;
top: 200px;
left: 200px;
}
Fiddle: http://jsfiddle.net/chpt3x1v/4/
I couldn't get JQM working in JSFiddle (didn't know how without it showing loads of errors), so I just used a regular button, but the same premise applies.
TWO IMAGES:
As you can see, it is completely off-center.
UPDATED ANSWER:
You need to give the button a set width and height, and then set the top margin to negative one half the height, and the left margin to negative half the width:
Updated DEMO
<div class="thediv"></div>
<button data-role="none" class="theButton">Button</button>
.thediv {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
.theButton {
position: fixed; /* or absolute */
top: 200px;
left: 200px;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
}
ORIGINAL ANSWER:
You can use fixed positioning and a negative margin to keep it centered:
<div data-role="page" id="page1">
<div role="main" class="ui-content">
<div class="centered"><button>Button</button></div>
</div>
</div>
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
background-color: black;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
}
.centered button {
margin: 0 !important;
height: 100%;
}
Updated FIDDLE
Firstly your code doesn't have an opening tag. Secondly, you need to have the parent element, i.e. the div, positioned as relative.
Third, you've positioned your button to the very edge of the div by using the same dimensions. Try:
<body>
<div>
<button>Button</button>
<div />
</body>
div {
position: relative;
width: 200px;
height: 200px;
background-color: black;
}
button {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
}
The z-index property will allow the button to overlay the div.
I ran into this challenge: fiddle. The short story is, I want to have the green block in the middle of the z-order, without having to change the HTML. So yellow on the bottom, green in the middle, and red on top.
.parent {
background-color: yellow;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
z-index: 1;
}
.child {
background-color: red;
position: relative;
top: 10px;
left: 20px;
height: 50px;
width: 150px;
z-index: 100;
}
.other-guy {
background-color: green;
position: absolute;
top: 40px;
left: 100px;
height: 200px;
width: 200px;
z-index: 50;
}
<div class="parent">
Chillin in the background
<div class="child">
I really want to be on top.
</div>
</div>
<div class="other-guy"> I want to be in the middle! </div>
The longer story is, in my solution I'm using bootstraps grid system to position the child element so the whole thing is responsive. The middle layer is a Google Maps element that needs to be manipulated by the user. My previous solution had an absolutely positioned child element on the map, which works, but I don't know how to make that responsive.
My new solution works great from a responsive angle, but then I found out that the parent is blocking interaction with the maps.
So I now need a solution have some responsive elements on top of Google Maps.
I removed the position absolute from the yellow div and removed the z-index from the green div. Maybe this is something as you said.
.parent {
background-color: yellow;
top: 0;
left: 0;
height: 200px;
width: 200px;
z-index: 1;
}
.child {
background-color: red;
position: relative;
top: 10px;
left: 20px;
height: 50px;
width: 150px;
z-index: 2;
}
.other-guy {
background-color: green;
position: absolute;
top: 40px;
left: 100px;
height: 200px;
width: 200px;
}
<div class="parent">Chillin in the background
<div class="child">I really want to be on top.</div>
</div>
<div class="other-guy">I want to be in the middle!</div>
Check out this article:
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
If this article is right and I understood it correctly, then it's not possible, because yellow and red are part of the same stacking context.
I did accomplish your goal by adding jquery to your fiddle and adding this line of code to actually move the green element into the yellow one:
$(".other-guy").insertAfter(".child");
I'm trying to place some large text in the dead center of the page. I only want (prefer) a body tag in the page and nothing else. I've tried using display: table-cell and setting the vertical-alignment to middle but that did not work with a height: 100%
I then found another question on stackoverflow which addressed this problem but I realized it does not work with bigger font. This is what I have so far: http://jsfiddle.net/aECYS/
Push the div to top and left based on the width and height specified.
CSS
body{ background-color: #000;}
div{
background-color: #000;
width:800px;
height: 200px; line-height: 200px;
position: absolute;
top: 50%; margin-top:-100px;
left: 50%; margin-left:-400px;
font-weight: bold;
font-size: 100px;
text-transform: uppercase;
color: #ccc; text-align:center
}
DEMO
If your position is absolute then you move your text anywhere you want change your css attribute with this.
Note: Absolutely positioned elements can overlap other elements.
position: absolute;
top: 37%;
left: 34%;
See Demo
Set width and height as 100%
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
Then the text center with the different screen size
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
is the best way, choose your class though here.