I know what absolute positioning in CSS is & how it is used, so I thought of playing with it. I created 3 divs mainly and set the position of the .red one as absolute and to my surprise, the .blue one goes missing. Why is that? Shouldn't the .red one be out of the flow and its position should have been altered rather than the .blue ones?
.red{
background-color: red;
height: 30px;
width: 30px;
position: absolute;
}
.blue{
background-color: blue;
height: 30px;
width: 30px;
}
.green{
background-color: green;
height: 30px;
width: 30px;
}
<div class="parent">
<div class="red">
</div>
<div class="blue">
</div>
<div class="green">
</div>
</div>
This is happening because of out of flow. As you can see in the snippet below, in the first .parent element, .red is visible, whereas .blue is not. The .blue element is present and is hidden behind .red. In the second .parent, the .red element has one more class .change changing the z-index property to -1. This makes the .red hide behind .blue..
.parent {
position: relative;
}
.red {
background-color: red;
height: 30px;
width: 30px;
position: absolute;
}
.blue {
background-color: blue;
height: 30px;
width: 30px;
}
.green {
background-color: green;
height: 30px;
width: 30px;
}
.change {
z-index: -1;
}
<div class="parent">
<div class="red">
</div>
<div class="blue">
</div>
<div class="green">
</div>
</div>
<br/><br/>
<div class="parent">
<div class="red change">
</div>
<div class="blue">
</div>
<div class="green">
</div>
</div>
Your .red div is above your .blue. For testing, add opacity: 0 to the red one and you will notice that it is still there.
This is because the .red has position: absolute while the blue and green one have position: relative. So they do not affect each other in their positons.
A relative element is positioned relative in its parent.
A absolute element is positioned absolute in its parent, where the top left corner is the origin. relative and absolute elements do not affect each other in their positions.
Related
I have the 3 div with 3 different of color and a paragraph. And i do a little manipulating with the paragraph so it can be moved anywhere with
p {
width: 50%;
border: 1px solid black;
margin: 0 auto;
position: relative;
bottom: 350px;
}
But after it moved, the problem is the last position of the block of paragraph still there and i want it to completely remove. How can i do that?
I will provide the SS so you can understand what i want.
When using position:relative and move the element, its first place (the space it takes) remain unchanged. As you can read here :
Setting the top, right, bottom, and left properties of a
relatively-positioned element will cause it to be adjusted away from
its normal position. Other content will not be adjusted to fit into
any gap left by the element.
div.red {
background: red;
height:120px;
}
div.blue {
background: blue;
height:120px;
}
p {
color: #fff;
padding: 20px;
position: relative;
top: -100px;
}
<div class="red">
</div>
<p>lorem ipusme lorem ipusmelorem ipusmelorem ipusme</p>
<div class="blue">
</div>
Instead you need to use position:absolute and add position:relative to the parent container to still be able to move the element relatively to its initial place.
div.red {
background: red;
height: 120px;
}
div.blue {
background: blue;
height: 120px;
}
div {
position: relative;
}
p {
color: #fff;
padding: 20px;
position: absolute;
top: -100px;
}
<div class="red">
</div>
<div>
<p>lorem ipusme lorem ipusmelorem ipusmelorem ipusme</p>
</div>
<div class="blue">
</div>
In the below examples I have 2 div's, What I'm trying to figure out is how to make .two green when .one is .active. Is it possible? jsFiddle
div {
position: relative;
height: 100px;
width: 300px;
}
.one {
background: red;
}
.two {
background: blue;
}
.one.active ~ .two {
background: green;
}
<directive-one>
<div class="one active">
First block
</div>
</directive-one>
<directive-two>
<div class="two">
Second block
</div>
</directive-two>
You can do this be referencing the directives specifically in css
div {
position: relative;
height: 100px;
width: 300px;
}
.one {
background: red;
}
.two {
background: blue;
}
directive-one:active ~ directive-two > .two {
background-color: green;
}
<directive-one>
<div class="one active">
First block
</div>
</directive-one>
<directive-two>
<div class="two">
Second block
</div>
</directive-two>
You can also just remove the directives so the divs can be accessed
div {
position: relative;
height: 100px;
width: 300px;
}
.one {
background: red;
}
.two {
background: blue;
}
.one:active ~ .two {
background-color: green;
}
<div class="one active">
First block
</div>
<div class="two">
Second block
</div>
Otherwise, I dont believe its possible to access a div that isnt a sibling or child, which is the case with the <div> inside the <directive-one> trying to access another <div> inside another <directive-two>
If you mark the directive-one with active, then it is possible to do with this css:
directive-one.active ~ directive-two > .two {
background: green;
}
I don't think it is possible to dig into the 'preceding' element though, but not totally sure.
I have a block <div> I want to define with precise pixel coordinates via position: absolute, but I want to position a heading above its parent <div>. If the font-size changes (or the user enlarges the text), the block <div> must stay in exactly the same place, but the heading may move up/down to accommodate the larger/smaller text.
Here is some sample code that, honestly, doesn't come close, but may help to illustrate the problem. It's just one of the variations I tried:
<!doctype html>
<html>
<head>
<title>Positioning Test</title>
<style>
#box1 { border: red 1px solid; }
#box1 h4 { margin: 0; color: blue }
.inner_box {
background: #aaf;
width: 400px;
height: 50px;
}
.target_pos {
position: absolute;
top: 50px;
left: 100px;
}
#marker {
width: 10px;
height: 10px;
background: red;
}
</style>
</head>
<body>
<div id="box1">
<h4>Heading</h4>
<div class="inner_box target_pos">
This is the <strong>inner_box</strong>.
</div>
</div>
<!-- Marks where the inner_box should begin -->
<div id="marker" class="target_pos"></div>
</body>
</html>
The idea is the blue inner_box must be positioned exactly at the marker (which it is), but the Heading text must be directly above it, and the red 1px border should enclose everything.
Here is how it looks in Firefox:
And here's how I would like it to look instead:
Since I have several of these boxes to work with, and their positions may change depending on viewport size, and the heading font/text will vary, I need a dynamic solution, here. I would prefer pure CSS3, but if JS is required, I could live with that.
I have created a fiddle for you that works for any font size, position and number of boxes.
http://jsfiddle.net/y73sqdr9/3/
Also
HTML
<div class="box target">
<h1>Headingggggggggg</h1>
<div class="inner">
This is the <strong>inner_box</strong>.
</div>
</div>
<div class="square target"></div>
<div class="box target2">
<h1>Headingggggggggg</h1>
<div class="inner">
This is the <strong>inner_box</strong>.
</div>
</div>
<div class="square target2"></div>
CSS
.box {
position: absolute;
border: 1px solid red;
border-top: none; }
.box h1 {
margin: -2em -1px -1px;
padding: .5em;
border: 1px solid red;
border-bottom: none;
line-height: 1; }
.box .inner {
padding: 1em;
background: #CCF; }
.square {
position: absolute;
width: 16px;
height: 16px;
background: red; }
.target { left: 100px; top: 150px; }
.target2 { left: 120px; top: 280px; }
I hope to have helped you!
How this is done:
The position id gives the position of the entire element.
The box class defines the width and height of the box and only has borders for bottom left and right leaving the top open because the header will be there
The header class height is set to zero as to not influence the box's position and is moved up 18 px
The h4 has borders on top left and right but not on the bottom so it will not block out the box
The html:
<!DOCTYPE html>
<html>
<head>
<title>Positioning Test</title>
<style>
.header{
position: relative;
bottom: 18px;
right:1px;
background: white;
height:0px;
}
.header h4{
width: 400px;
margin:0;
padding:0;
border: 1px red solid;
border-bottom:none;
}
.box{
border: 1px red solid;
border-top:none;
width: 400px;
height: 300px;
background: #aaf;
}
#position1 {
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div id="position1" class="box">
<div class="header">
<h4>Title</h4>
</div>
<div class="inner">
I'm inside!
</div>
</div>
</body>
<html>
Firstly your body tags are are not wrapping your code.
Secondly your red box div should wrap all the other divs and be closed last. It closes early
How do I position 2 divs that overlap plus a third div just to the right of those overlapping divs (but the third not floated all the way right)?
<div id=one>I overlap id=two.</div>
<div id=two>I overlap id=one.</div>
<div id=three>I am just to the right of one and two.</div>
The desired layout is:
| one-overlaps-two | three |
http://i.imgur.com/4CMNaUh.png
I know I can overlap the first 2 divs using a wrapper div that's position:relative and setting divs one & two to position:absolute
<div id="wrapper">
<div id=one>I overlap id=two.</div>
<div id=two>I overlap id=one.</div>
</div>
#wrapper{position:relative;}
#one,#two{position:absolute;}
But how can I get div id=three just to the right of overlapping divs one & two?
What I've got so far: http://jsfiddle.net/justAsking/cXrBA/
A solution can be as follows:
http://jsfiddle.net/cXrBA/2/
HTML
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
.wrapper {
padding-left: 100px;
width: 100px;
height: 100px;
position: relative;
}
.one , .two {
width: 100px;
position: absolute;
left: 0;
}
.one {
background-color: blue;
height: 50px;
top: 0;
z-index: 1;
}
.two {
background-color: red;
height: 100px;
top: 0;
}
.three {
background-color: green;
width: 100px;
height: 100px;
}
Give the second div a negative margin-left;
http://jsfiddle.net/HXH76/
div {
display: inline-block;
}
#one {
background: hsla(0,100%, 50%, 0.50);
}
#two {
background: hsla(90,100%, 50%, 0.50);
margin-left: -40px;
}
#three {
background: hsla(180,100%, 50%, 0.50);
}
I have a selection of squares (squares turned 45° to look like diamonds) which I want to use to make up a big diamond shape with a central red diamond.
I am having issues organising the diamonds themselves and the href seems to fail.
How do I position the responsive diamonds in a regular grid?
Her is my code:
body {
background: black;
color: #000000;
font: 13px georgia, serif;
line-height: 1.4;
font-weight: lighter;
text-rendering: optimizelegibility;
}
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: white;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: white;
}
#diamond_red {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #AA1C08;
position: relative;
top: -50px;
}
#diamond_red:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: #AA1C08;
}
<a class="navigation">
<center>
<div id="diamond"></div>
<div id="diamond"></div>
<div id="diamond" href="/photos/"></div>
<div id="diamond_red"></div>
<div id="diamond" href="/projects/"></div>
<div id="diamond"></div>
<div id="diamond"></div>
<div id="diamond" href="/archive/"></div>
</center>
</a>
The responsive grid of diamons:
I don't think you have the right aproach to achieve a regular responsive diamond grid layout. It would be much simpler to:
create a responsive grid of squares (3x3 or whatever grid you feel like)
then rotate the grid 45 degrees.
That way you won't have to fiddle with borders, pseudo elements (:after, :before) and positioning each diamond.
Here is a responsive example
It uses percentage width and padding-bottom to keep the diamonds responsive and transform:rotate(45deg); to rotate te whole grid and make it look like a diamond grid:
body{background:#000;}
#big_diamond {
width: 50%;
margin:15% auto;
overflow:hidden;
transform: rotate(45deg);
}
.diamond {
position: relative;
float: left;
width: 31.33%;
padding-bottom: 31.33%;
margin: 1%;
background: #fff;
transition:background-color .4s;
}
.diamond a {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
#red{background-color: #AA1C08;}
.diamond:hover, #red:hover{background-color:darkorange;}
<div id="big_diamond">
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond" id="red"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
</div>
As other people have mentioned, there are some errors in your HTML that I corrected like: Ids need to be unique and href can't be used on divs.
You're going to need to be more specific / clear on your first question.
First of all, you are using the ID 'diamond' many times. IDs are meant to be unique and used for one element. You should be using classes for this, not IDs.
Second, you can't use href within div tags. You could wrap the divs in a tags like this:
<div class="diamond"></div>
Or, even better so that the whole shape is clickable you can put the a inside of the div and make the a a block level element that is 100% width and height like this:
<div class="diamond"></div>
div a{
width: 100%;
height: 100%;
display: block;
}
JSFiddle Example: http://jsfiddle.net/kQj24/1/
This html has fallback for browsers that don't support transform in that the diamond becomes a square. Also the <div> elements can be wrapped in <a> tags using this method without altering any existing css rules for a. If transform isn't supported the text inside the square class doesn't rotate either.
<center>
<div class="diamond">
<div class="row">
<div class="square"><p>Text</p></div>
<div class="square"></div>
<div class="square"><p>Text</p></div>
</div>
<div class="row">
<div class="square"><p>Text</p></div>
<div class="square red"><p>Text</p></div>
<div class="square"><p>Text</p></div>
</div>
<div class="row">
<div class="square"><p>More</p></div>
<div class="square"></div>
<div class="square"><p>Text</p></div>
</div>
</div>
</center>
CSS, using your existing body rule:
.diamond {
padding-top: 50px;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
.square {
background-color: white;
display: inline-block;
height: 50px;
overflow: hidden;
width: 50px;
}
.square:hover {
background-color: green;
}
.square p {
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
.red {
background-color: red;
}
http://jsfiddle.net/5Q8qE/8/