this is my html
a.html
<div class='main'>
<div class="sub1"></div>
<div class="sub2"></div>
</div>
and css:
a.css
.main {
width: 200px;
height: 400px;
margin-left: 100px;
position: relative;
border: 1px solid red;
}
.sub1 {
width: 100px;
height: 100px;
border: 1px solid;
position: absolute;
left: 0px;
}
.sub2 {
width: 50px;
height: 300px;
position: absolute;
top: 30px;
left: 20px;
border: 1px solid green;
}
now I want div.sub1 is relative to the parent div,
and div.sub2 is relative to the browser,
how can I set style to div.sub2?
As per my knowledge there are two possible solution either put second div outside the parent div. In this way .sub2 will not be child of parent div.
Or make second div position:fixed instead of absolute.
.sub2 {
width: 50px;
height: 300px;
position: fixed;
top: 30px;
left: 20px;
border: 1px solid green;
}
Fiddle
You need to set .sub1 position as relative (instead of absolute).
.sub1 {
width: 100px;
height: 100px;
border: 1px solid;
position: relative;
left: 0px;
}
I hope this helps.
Related
<html>
<body>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
right:0;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</body>
</html>
In my code div relative I wrote right:0; but this box does not move in right corner and still is in left corner.
Seems to be working (if you add margin-left: auto). Other than that being relative right: 0 means moving right from current position. So no reason it would go to right edge. If it was absolute it would have.
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
right: 0;
margin-left: auto;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
<div class="relative">
i am relative
<div class="absolute">
i am absolute
</div>
</div>
This may be a stupid question, but I have to clarify this fact. So this is my concern. I can style two div elements to look like below.
.element-container{
display: flex;
position: relative;
width: 300px;
height: 100px;
}
.element{
z-index:1;
width: 100%;
height: 100%;
position: absolute;
background-color: Transparent;
background-repeat:no-repeat;
border-radius: 20px;
display: inline-block;
border: 2px solid black;
}
.element-shadow{
z-index: -1;
top: 10%;
left: 4%;
border-radius: 20px;
background-color: yellow;
height: 100%;
width: 100%;
position: absolute;
}
<div class="element-container">
<div class="element"></div>
<div class="element-shadow"></div>
</div>
my question is can we do the same using ::after pseudo element. Basically can we add an html element after some other element rendered in to DOM (make the shadow effect after element is created, so someone does not need to concern about the actual size of the element when use it somewhere if the shadow element created with the same styles but with ::after pseudo element)
#Telary's answer is acceptable with this upper part of the question(original question) But now it directs me to another question, I was try to did the same with an <button>, but it does not work as expected. what did I miss here? Below code is my new problem
.but{
position: absolute;
background-color: Transparent;
background-repeat:no-repeat;
cursor:pointer;
outline:none;
border-radius: 500px;
display: inline-block;
border: 2px solid black;
color: black;
font-size: 250%;
padding: 20px 100px;
}
.but:after{
content:'';
z-index: -1;
top: 8%;
left: 3%;
border-radius: 500px;
display: inline-block;
background-color: rgba(140,122,230,1);
position: absolute;
}
<button class="but">GO</button>
Is it because I removed the outer <div> element?
You can use the code below to achieve the needed effect:
.element-container{
display: flex;
position:relative;
width: 300px;
height: 100px;
z-index: 1;
}
.element{
width: 100%;
height: 100%;
position: absolute;
background-color: Transparent;
background-repeat:no-repeat;
border-radius: 20px;
display: inline-block;
border: 2px solid black;
}
.element:after{
content:'';
display: inline-block;
top: 10%;
left: 4%;
border-radius: 20px;
background-color: yellow;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
}
<div class="element-container">
<div class="element"></div>
</div>
You need to remove z-index in ".element" selector, to put it on the top of "shadow" layer.
div {
margin: 50px;
position: relative;
background-color: red;
width: 200px;
height: 50px;
border: 2px solid black;
}
div::after {
content: '';
position: absolute;
background-color: green;
width: 100px;
height: 100px;
border-radius: 100%;
top: -25px;
left:50px;
border: 2px solid black;
}
div.overflow-hidden {
overflow: hidden;
}
<div>1st</div>
<div class="overflow-hidden">2nd</div>
1st case: as expected.
2nd case[overflow-hidden]: Middle part of top and bottom border should be green. Looks like circle is not above its parent div's border. Is there any way to make it above it? Whats happening here? Will the z-index work?
Why is this happening?
This is because overflow: hidden; clips the content to the content box.
hidden
Content is clipped if necessary to fit the content box. No scrollbars
are provided.
MDN Web docs - https://developer.mozilla.org/en/docs/Web/CSS/overflow
This can be seen in the first example below as I have changed the border to be transparent.
What can you do?
One way to get around this would be to apply the border using an absolutely positioned pseudo element instead of to the containing div.
div {
background-color: red;
height: 50px;
margin: 50px;
overflow: hidden;
position: relative;
width: 200px;
}
div::after {
background-color: green;
border: 2px solid black;
border-radius: 100%;
content: '';
height: 100px;
left: 50px;
position: absolute;
top: -25px;
width: 100px;
}
div.overflow-with-border {
border: 2px solid transparent;
}
div.overflow-with-pseudo {
padding: 2px;
}
div.overflow-with-pseudo::before {
border: 2px solid black;
box-sizing: border-box;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div class="overflow-with-border">1st</div>
<div class="overflow-with-pseudo">2nd</div>
Here is the fiddle.
I have two div elements.
<div class="parent">
<div class="child">
</div>
</div>
And CSS code for that.
.parent {
height: 20px;
width: 100px;
background-color: #080;
position: relative;
}
.child {
position: absolute;
width: 80px;
height: 200px;
background-color: #008;
right: -10px;
top: 30px;
}
.child:before {
border-right: 10px solid transparent;
border-bottom: 10px solid #008;
border-left: 10px solid transparent;
top: -10px;
width: 0;
height: 0;
content: "";
position: absolute;
left: 50%;
}
How to position .child:before related to .parent without JS. I know solution with .parent:before, but it is not good for me.
I think this is what you are trying to do.
I think you will find this more robust and scalable.
.parent {
height: 20px;
width: 100px;
background-color: #080;
position: relative;
}
.child {
position: absolute;
width: 80px;
height: 200px;
background-color: #008;
left: 50%;
/* note 50% */
top: 30px;
margin-left: -20px;
/* 2x your arrow size */
}
.child:before {
position: absolute;
border-right: 10px solid transparent;
border-bottom: 10px solid #008;
border-left: 10px solid transparent;
top: -10px;
/* your border size */
margin-left: 10px;
/* your border-size */
width: 0;
height: 0;
content: "";
left: 0;
}
<div class="parent">
<div class="child">
</div>
</div>
You can only position an element absolutely in relation to the closest parent that is itself positioned. In your case, that's .child.
If .child and .child:before are not related in your layout, why not put .child:before in the parent element, either as .parent:before, or as its own element?
Alternatively, if your elements both have fixed widths as in your example, just give the pseudo-element a fixed pixel position as well. Demonstration.
I want to center 4 small, square child divs along each edge of a square parent div. My current solution depends on hacked-together absolute positioning. http://jsfiddle.net/Lrc4h/
HTML:
<div class="tile">
<div class="tile_inner"></div>
<div class="exit_left"></div>
<div class="exit_right"></div>
<div class="exit_up"></div>
<div class="exit_down"></div>
</div>
CSS:
.tile {
float: left;
width: 180px;
height: 180px;
background-color: gray;
border: 2px solid black;
}
.tile_inner {
width: 120px;
height: 120px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid white;
}
.exit_left {
position: absolute;
top: 90px;
width: 20px;
height: 20px;
border: 3px solid pink;
}
.exit_right {
position: absolute;
left: 165px;
top: 90px;
width: 20px;
height: 20px;
border: 3px solid red;
}
.exit_up {
position: absolute;
left:90px;
top:10px;
width: 20px;
height: 20px;
border: 3px solid blue;
}
.exit_down {
position: absolute;
left:90px;
top:165px;
width: 20px;
height: 20px;
border: 3px solid green;
}
How can I get each of the exit directions centred along the edge of each axis?
Here is an updated snippet: http://jsfiddle.net/Lrc4h/3/
First of all you need to know that when you're using position: absolute the element will position with absolute coordinates based on the first parent that is position: absolute or position: relative falling back to the document if there is none.
Secondly it's important, when dealing with borders like in your example, to understand the box model and how nasty things get when borders cross the borders ;-). It's a common practice to use box-sizing: border-box to make things a bit easier and to mix relative and absolute units nicely. I've included a box model initialization how I prefer it on the top of the example I've posted.
Combining all this together you can start use relative units (percentage) in your absolute positioning. The example I've posted is still using absolute positions but relative to the .tile element. You should always make your absolute positions relative to a parent. Using left: 50% centers the start of your element to the center of your parents width. However, as your exit element also has a width this needs to be compensated by half of it's width. That's why there is a margin-left: -15px. You could also use the calc function if browser support is IE9+. This would look like this: left: calc(50% - 15px).
As you can see the example still has absolute positions and this problem is easy to solve with absolute positioning. You still have to "hard code" a few values, but they are all relative to the parent and you can easily change your .tile dimensions without changing the child elements.
Cheers
Gion
.tile_inner {
width: 120px;
height: 120px;
position: relative;
top: 50%;
left: 50%;
margin: -60px 0 0 -60px;
border: 1px solid white;
}
You just need to adjust the margin
Demo
.tile_inner{
margin: -60px 0 0 -60px;
}
Maybe as not as clean as it can get, but you can use the calc function to use percentages in conjunction with pixels (based on the width & height of the child divs. For example (I'm including only the changes to the CSS code:
.tile {
position: relative;
}
.exit_left {
top: calc(50% - 13px);
}
.exit_right {
left: calc(100% - 26px);
top: calc(50% - 13px);
}
.exit_up {
left: calc(50% - 13px);
}
.exit_down {
left: calc(50% - 13px);
top: calc(100% - 26px);
}
In that way, even when you change the parent div's dimensions, the child divs will remail in place.
Demo: http://jsfiddle.net/xPP32/
Here's slightly optimized version that relies on pseudo-elements and relative units of measurement (%). Scaling this one is a breeze. All you need to do is change the height and width on the .tile and the rest is taken care of. Here's the original square: http://jsfiddle.net/MGse6/. And, here's a square scaled up: http://jsfiddle.net/k9dxW/.
HTML:
<div class="tile">
<div></div>
</div>
CSS:
*, :before, :after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
.tile {
width: 180px;
height: 180px;
background-color: gray;
border: 2px solid black;
position: relative;
}
.tile > div {
width: 65%;
height: 65%;
border: 1px solid #fff;
margin: 17.5% auto 0;
}
.tile:before,
.tile:after,
.tile > div:before,
.tile > div:after {
content: "";
position: absolute;
width: 16%;
height: 16%;
border: 3px solid;
}
.tile:before {
top: 0;
left: 50%;
margin-left: -8%;
border-color: blue;
}
.tile:after {
top: 50%;
right: 0;
margin-top: -8%;
border-color: red;
}
.tile > div:before {
bottom: 0;
left: 50%;
margin-left: -8%;
border-color: green;
}
.tile > div:after {
top: 50%;
left: 0;
margin-top: -8%;
border-color: pink;
}
And, here's another solution where elements are arranged using flow: http://jsfiddle.net/xep9M/.
HTML:
<div class="tile">
<!--
It's very important
to have the divs stack
next to each other
-->
<div></div><div></div><div></div><div></div><div></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
.tile {
width: 180px;
height: 180px;
background-color: gray;
border: 2px solid black;
box-sizing: content-box;
}
.tile > div {
width: 16%;
height: 16%;
display: inline-block;
border: 3px solid;
}
.tile > div:first-of-type,
.tile > div:last-of-type {
display: block;
margin: 0 auto;
}
.tile > div:first-of-type {
margin-bottom: 1.5%;
border-color: blue;
}
.tile > div:last-of-type {
margin-top: 1.5%;
border-color: green;
}
.tile > div:nth-of-type(3) {
height: 65%;
width: 65%;
border: 1px solid #fff;
}
.tile > div:nth-of-type(n + 2) {
vertical-align: middle;
}
.tile > div:nth-of-type(2) {
margin-right: 1.5%;
border-color: pink;
}
.tile > div:nth-of-type(4) {
margin-left: 1.5%;
border-color: red;
}