This is hard to explain so I've put together this JSFiddle. I want the black div to cut through the blue box so that the black div is underneath the horizontal blue lines. So I'd like the <div class="title">Testing</div> to overlay the <div class="middleFifth">
http://jsfiddle.net/Zhxt9/
TIA in advance and sorry for the bad explanation!
You can relatively position the black div and set the z-index so that it is behind the blue div (also must specify z-index on blue div).
.title{
width:100%; float:left;
background-color:black;
position: relative;
top: -50px;
z-index: 0;
}
Updated Fiddle
Not entirely sure what you're aiming for, but you could try something like:
.title{
width:100%;
float:left;
background-color:black;
/* Below properties are what I added */
position: absolute;
top: 40px;
z-index: -10;
}
Obviously you should change the z-index to a more sensible value by setting it on your other elements, but I included it here for simplicity's sake.
Try:
.title{
margin-top: -50px;
}
http://jsfiddle.net/Zhxt9/1/
Or other options would be:
.title {
position: relative;
top: -50px;
}
or:
.title {
position: absolute;
top: 50px;
}
Depending on the rest of your page
Related
Here is the thing.. I have a web page split to 2 sections (intro and main)
The intro section stretches to 100 based on the browser height with CSS:
#intro {
height: 100vh;
}
I want to add an arrow with href that will be positioned at the bottom section of the intro div no matter which screen size is entering the page.
Do you have any idea how can it be done?
Thanks!
#intro {
...
position: relative; /* or absolute, as appropriate */
}
#down_arrow {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -25px; /* half the element's width */
}
This assumes markup similar to the following. In the future, please provide your markup in your question.
<div id="intro">
<div id="down_arrow"> ... </div>
</div>
Set position:relative to the #intro element and position:absolute to the arrow.
Also give a bottom and left rule:
#arrow {
width:40px; /* sample width - set as you wish */
position:absolute;
bottom:10px;
left:50%;
margin-left:-20px; /* important: set half of the width (centers the div) */
}
margin-top:90vh
:D and I need to write some text so stackoverflow knows I'm not spamming.
Rich homie quan is a good rapper. I think the limit has been reached, now.
Did You mean something like this Fiddle
I use positioning of intro element as relative and set this viewportheight as you want.
So if i set arrow postion to absolute it will stay inside intro element.
.arrow{
width: 50px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -25px;
}
Using flexbox (demo):
<div class="intro">
<div class="nav"></div>
<div class="link-container">
<a>Arrow</a>
</div>
</div>
<div class="main"></div>
CSS:
.intro {
height: 100vh;
display: flex;
flex-direction: column;
background: blue;
}
.intro > .link-container {
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
}
...
Place the arrow inside of the intro container and use:
.arrow{
bottom: 0px;
}
you may also need to fiddle around with the POSITION property as well, but this should give you what you need. Hope this helps!
.section2 {
position:fixed;
bottom:0;
}
#intro {
position: relative;
}
Add appropriate styles to make it as center of the screen.
i have came across a problem, i am fairly new to CSS but how do i make one div go over the other? This is my code:
#left_box
{
margin-top: 0px;
min-width: 10%;
max-width: 10%;
height: 800px;
background: #C90;
border: thin 5px #33CCFF;
position: absolute;
z-index:1;
left: 16px;
top: 1px;
float:none;
}
#bar_outside
{
margin-top:75px;
min-width:10px;
max-width:2000px;
height:55px;
background:#ff69b4;
border:#ff69b4: 5px;
position:static;
z-index:2;
}
thanks for your help!
If you want one div to be on top of the other, you can change the position: static in your #bar_outside to position:relative as the z-index property just works for relative, absolute or fixed. See the fiddle.
If you want the divs to be positioned one to the side of the other, use the float CSS attribute accordingly in both your CSS classes. See the fiddle.
You don't need position: absolute. Float left and define width
I have a rounded square box image that has a red strip that runs along the left side and has a transparent background (the white bit) which I created in photoshop. I would like to place an image behind this box. I have tried setting the position:absolute and z-index: -1; however, it places the image behind everything. Is there a way I can achieve this with just the CSS? P.S. I have searched for solutions but the ones I have come across did not seem to help me at all.
CSS:
#boxes img {
border:1px solid;
margin:4px 0 0 0px;
padding:0;
position: absolute;
width: 359px;
height: 218px;
z-index: -1 ;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
#boxes .box {
width:370px;
height:241px;
float:left;
background-image:url(../imgs/box_front.png);
background-repeat:no-repeat;
background-color:#FFF;
margin:80px 30px 0 0;
}
You can't reliably set z-index without setting position on your elements; the stacking is also relative to the elements' containers, so if everything is at root level the image with a negative z-index will disappear behind the page. (Personally, I try and avoid negative z-index values whenever possible.)
#boxes {
position: relative;
}
#boxes img {
border:1px solid;
margin:4px 0 0 0px;
padding:0;
position: absolute;
width: 359px;
height: 218px;
z-index: 1 ;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
#boxes .box {
width:370px;
height:241px;
float:left;
background-image:url(../imgs/box_front.png);
background-repeat:no-repeat;
background-color:#FFF;
margin:80px 30px 0 0;
position: relative;
z-index: 2;
}
EDIT:
The problem is that your HTML is structured so the red stripe is the background image of the container that you're loading the image into. As this also has a background-color, the image is being lost behind it.
A better way of doing this would be to use HTML/CSS' natural document flow - i.e. the later the element appears in the HTML, the 'higher' it is in the natural z-index. This'll mean you don't have to specify z-index values, but you will need to add a presentational div to your code (unless you want to monkey around with :after pseudo-elements):
Each grey box will need to look like this:
<div class="grey box">
<h3>Stationary</h3>
<span class="border"> </span><img src="http://placekitten.com/g/361/220"><div class="innerBox"> </div>
</div>
... and your CSS will need to change. Remove the background from the .box styles, and add this to your CSS:
#boxes .innerBox {
position: absolute;
left: 0;
top: 0;
width:370px;
height:241px;
background-image:url(http://i754.photobucket.com/albums/xx182/rache_R/box_front_zps196242cf.png);
background-repeat:no-repeat;
}
You can then remove the z-index from #boxes .box, and because the innerBox div appears after the image in your markup, it will naturally appear higher than your image.
If you can't add any extra HTML to your markup template, you could repurpose the border divs, which don't seem to be doing much:
#boxes .border
{
border:none;
z-index:1;
cursor:pointer;
position: absolute;
left: 0;
top: 0;
width:370px;
height:241px;
background-image:url(http://i754.photobucket.com/albums/xx182/rache_R/box_front_zps196242cf.png);
background-repeat:no-repeat;
}
You'll need to update your images too:
#boxes img {
/* other declarations */
position: absolute;
left: 4px;
top: 0;
/* other declarations */
}
... and make sure your #boxes .box style has position: relative; set.
That should do you: http://jsfiddle.net/mr3Fq/4/
I am having trouble with element stacking in a HTML page. I need to get span (class="class_span") to have a higher stacking order than div (class="class_div") with border. I have tried to change the z-index but with no luck. I know that I should not use absolute position, but the page is dependent on it, sorry. How can I accomplish this?
HTML:
<ul>
<li>
<div class="class_div">
</div>
<span class="class_span">
google
</span>
</li>
</ul>
CSS:
.class_div{
position: absolute;
border: 100px solid;
width:100px;
height:50px;
left:0px;
}
.class_span{
float: left;
}
Live DEMO
Add position: relative to the span so that you can apply z-index on it. Note that the z-index of your span must be higher than that of the div so that it appears above the div:
.class_div{
position: absolute;
border: 100px solid;
width:100px;
height:50px;
left:0px;
z-index: 1;
}
.class_span{
float: left;
position: relative;
z-index: 10;
}
Example
Edit:
As an alternative to float: left, you might consider using position: absolute and set left to 0px:
.class_span{
position: absolute;
left: 0;
z-index: 10;
}
You may need to set the top as well, and it may also be necessary to set a parent element's position to relative so that the span can be positioned relative to that parent element.
position:absolute will remove an element from the flow. You'll need to use position on .class_span too with a higher z-index.
Please check this.
http://jsfiddle.net/YMrLd/18/
The following CSS is there in the fiddle link.
.class_div{
position: absolute;
border: 100px solid;
width:100px;
height:50px;
left:0px;
}
.class_span{
position: absolute;
top: 100px;
left: 100px;
}
And let me know you need anything different.
Please attached a screenshot of your desired output if this doesn't help.
Just check this fiddle:
http://jsfiddle.net/9EJpu/25/
How can I stretch the blue div 100% horizontally so it docks to the purple right div?
If I set width:100% its just doing what a div is used for to "line-break" down the purple div.
I also tried display:inline(-block) nothing helped to make the purple div stay on the same
line as the blue div.
The solution must work on IE9. Please no CSS3 hacks.
If I interpret your question correctly you need to change a couple of things...
#wrap {
width:100%;
height:100%;
background-color:green;
position: relative;
}
#left_col {
overflow:auto;
float:left;
height:100%;
margin-right: 100px;
background-color:blue;
}
#right_col {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width:100px;
background-color:purple;
}
You could add position: fixed to #right_col, but it would cover your footer.
Here is a demo:
http://jsfiddle.net/xuBfe/
Using CSS3's relatively safe calc property. -> http://jsfiddle.net/joplomacedo/9EJpu/27/
You can use safer properties though, that just seemed the quickest way to do it with your existing markup.
Example:
http://jsfiddle.net/hunter/9EJpu/37/
To get the content of the main panel to have the proper width you can add a wrapping element within left-col
#left_col
{
overflow:auto;
float:left;
height:100%;
width:100%;
background-color:blue;
}
#left_col > *
{
margin-right: 100px;
}
#right_col
{
right: 0;
top: 0;
position:fixed;
z-index: 1000;
height:100%;
float:right;
width:100px;
background-color:purple;
}
#footer
{
width: 100%;
bottom: 0;
left: 0;
position: fixed;
background-color:yellow;
z-index: 2000;
}
Another possible solution that makes use of the safer box-sizing property.
http://tinkerbin.com/Vi1Rtt1T
make blue width 100% and pad the right side with the width of the purple, purple should have fixed on the right
Edit:
yes I forgot, ok then just float a div to the right side with the width of the purple (inside of the blue). Just need a space holder so things don't run underneathe