I try to put a inner clipped image into a container but looks like it not exactly put at the center of container!
What's the correct way to do match to position the inner element exactly at center of the container?
.container {
position: relative;
width: 130px;
height: 130px;
overflow: hidden;
border: 5px solid #e0e0ef;
border-radius:50%;
}
.inner {
position: absolute;
top: -140px;/**/
left: -160px;/**/
clip-path: circle(60px at 200px 220px);
background-color: #ece0e0;
}
<div class="container">
<img class="inner" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crateva_religiosa.jpg/440px-Crateva_religiosa.jpg" alt="alternatetext">
</div>
Is this what your looking for? I updated the clip-path: circle() declaration and specifically the two position values. The circles radius of 60px was unchanged, but the position values for the center of the circle were changed to appear more centered in the parent container.
.container {
position: relative;
width: 130px;
height: 130px;
overflow: hidden;
border: 5px solid #e0e0ef;
border-radius:50%;
}
.inner {
position: absolute;
top: -140px;/**/
left: -160px;/**/
clip-path: circle(60px at 225px 205px);
background-color: #ece0e0;
}
<div class="container">
<img class="inner" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crateva_religiosa.jpg/440px-Crateva_religiosa.jpg" alt="alternatetext">
</div>
Change the top/left with calc function!
.container {
position: relative;
width: 130px;
height: 130px;
overflow: hidden;
border: 5px solid #e0e0ef;
border-radius:50%;
}
.inner {
--x: 200px;
--y: 220px;
position: absolute;
top: calc(60px + 5px - var(--y));
left: calc(60px + 5px - var(--x));
clip-path: circle(60px at var(--x) var(--y));
background-color: #ece0e0;
}
<div class="container">
<img class="inner" style="--x:150px;--y:100px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crateva_religiosa.jpg/440px-Crateva_religiosa.jpg" alt="alternatetext">
</div>
Related
I want to make vertical line in DIV.
then I want to layer img on vertical line.
(the pic shows the result I want)
For my source code is like this .
<div style="background-color:gray;width:1px;height:100%;"></div>
<img src="circle.png">
<img src="triangle.png">
How can I layer these elements???
You will need to do some math to adjust it in the center.
.outer-flex {
display: flex;
width: 40px;
align-items: center;
position: absolute;
}
.line {
background-color: gray;
width: 1px;
height: 100vh;
margin-left: auto;
margin-right: auto;
}
.circle {
position: absolute;
left: calc(50% - 15px);
top: 20px;
border: 5px solid white;
border-radius: 20px;
}
.arrow {
position: absolute;
top: 70vh;
left: calc(50% - 15px)
}
<div class="outer-flex">
<div class="line"></div>
<img src="https://www.marylandeyeassociates.com/wp-content/uploads/2015/03/red-dot-hi.png" width="21px" class="circle">
<img src="https://image.flaticon.com/icons/png/512/60/60995.png" width="31px" class="arrow">
</div>
The images are inside the div this way:
div {
background-color: gray;
width: 1px;
height: 200px;
}
img:first-of-type {
margin-left: -10px;
top: 30px;
position: relative;
}
img:last-of-type {
margin-left: -10px;
top: 85px;
position: relative;
}
<div>
<img src="https://picsum.photos/20/20" />
<img src="https://picsum.photos/20/20" />
</div>
If you know the width of the images, move them to the left with a negative margin of half their width.
I have a DIV that I'm using as a "separator".
Requirements:
That separator should be placed on the bottom of the header.
I need that separator to span across the full viewport width.
I need to style it using box-shadow on it.
Problems:
I have an outer Layout DIV that limits everything to max-width = 500px;
My header is not fixed (it's sticky, so it only becomes fixed after some scroll). It starts as relative, so I can absolute position the separator.
I had to make the separator DIV with position: absolute and width: 100vw so make it span the full viewport with.
QUESTION
It works as intended if I use the border-bottom property. It spans the full width of the viewport (1st snippet).
But it doesn't work with box-shadow (nothing is displayed. 2nd snippet). Why? Is it possible to make it work with box-shadow in this situation?
SNIPPET: works with border-bottom
.layout {
width: 100%;
max-width: 500px;
margin: auto;
}
.header {
height: 120px;
background-color: lightblue;
position: relative;
}
.separator {
position: absolute;
width: 100vw;
height: 3px;
top: 100%;
border-bottom: 1px solid black;
/*box-shadow: 0 4px 3px -3px black;*/
left: 50%;
transform: translate(-50%, -50%);
}
.main {
height: 150px;
background-color: lightgreen;
}
<div class="layout">
<div class="header">
Header
<div class="separator"></div>
</div>
<div class="main">
Main
</div>
</div>
SNIPPET: does NOT work with box-shadow
.layout {
width: 100%;
max-width: 500px;
margin: auto;
}
.header {
height: 120px;
background-color: lightblue;
position: relative;
}
.separator {
position: absolute;
width: 100vw;
height: 3px;
top: 100%;
/*border-bottom: 1px solid black;*/
box-shadow: 0 4px 3px -3px black;
left: 50%;
transform: translate(-50%, -50%);
}
.main {
height: 150px;
background-color: lightgreen;
}
<div class="layout">
<div class="header">
Header
<div class="separator"></div>
</div>
<div class="main">
Main
</div>
</div>
The 5-value box-shadow shorthand you're using sets the following properties:
offset-x | offset-y | blur-radius | spread-radius | color
Your spread radius is set to -3px. This diminishes the "height" of the shadow to 0, since the height of your separator is 3px.
The shadow will display if you increase the spread radius. Try this instead:
box-shadow: 0 4px 3px 0px black
Somehow the box-shadow property in that situation need some minimal height render a shadow. I've managed to find a solution. See snippet below.
.layout {
width: 100%;
max-width: 500px;
margin: auto;
}
.header {
height: 120px;
background-color: lightblue;
position: relative;
}
.separator {
position: absolute;
width: 100vw;
height: 10%;
top: 95%;
/*border-bottom: 1px solid black;*/
box-shadow: 0 4px 3px -3px black;
left: 50%;
transform: translate(-50%, -50%);
}
.main {
height: 150px;
background-color: lightgreen;
}
<div class="layout">
<div class="header">
Header
<div class="separator"></div>
</div>
<div class="main">
Main
</div>
</div>
I have a parent div and a child div. The child div has the position: absolute property. It is already centered, but I'd like to align it to the middle of the parent div. How do I go about doing that? Here's my jsFiddle
HTML
<div id='parent'>
<div id='child'>
</div>
</div>
CSS
#parent {
position: relative;
width: 500px;
height: 300px;
background-color: red;
}
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 50%;
}
The solution is to use transform: translate(-50%, -50%) on the child div, like so:
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 50%;
top: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
https://jsfiddle.net/jwoy7rxr/
This works because the transform positions the item based on a percentage from it's own point of origin.
Since the parent has a height based on px, you can safely use a simple margin top and bottom to centre the element.
#parent {
position: relative;
width: 500px;
height: 300px;
background-color: red;
}
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 0;
right: 0;
margin: 115px auto;
border-radius: 50%;
}
Here's the fiddle: https://jsfiddle.net/Lr3fLser/
You need to give the parent:
#parent {
width: 500px;
height: 500px;
background-color: red;
display: table-cell;
vertical-align: middle;
}
#child {
width: 70px;
height: 70px;
background-color: blue;
border-radius: 50%;
}
You need the display table-cell in order to use the vertical-align.
Then add align="center" to the parent div's:
<div align="center" id="parent">
<div id='child'>
</div>
</div>
I have the updated JSFiddle attached:
https://jsfiddle.net/o7pzvtj3/2/
My layout consists of 3 DIVs
The first DIVis a wrapper.
The second DIV is centered and uses max-width:980px; Otherwise it defaults to 100% width.
The third DIV is 200px wide and uses absolute position. right:-200pxand top:0px position it next to the first DIV
This layout works perfect but only because the last DIVhas a width of 200px. If that DIV had a variable width I couldn't use right:-200px and it wouldn't place correctly.
So my question is what would I do if the DIV with absolute position had a variable width? How would I place it next to the main DIV?
Here is my code.
<div class="outer_container">
<div class="internal_alignment">
<div class="main_container"></div>
<div class="column_outside"></div>
</div>
</div>
CSS
.outer_container {
overflow: hidden;
position: relative;
}
.internal_alignment {
position: relative;
max-width: 980px;
margin: 0px auto;
}
.main_container {
height: 500px;
background-color: bisque;
}
.column_outside {
position: absolute;
top: 0px;
right: -200px;
height: 500px;
width: 200px;
background-color: black;
}
FYI: the outer_container DIV allows column_outside to sit outside the screen if the browser is smaller than 980px wide.
Make it a child of the main and give it left: 100%;
.outer_container {
overflow: hidden;
position: relative;
}
.internal_alignment {
position: relative;
max-width: 980px;
margin: 0px auto;
}
.main_container {
height: 500px;
background-color: bisque;
}
.column_outside {
position: absolute;
top: 0px;
left: 100%;
height: 500px;
width: 200px;
background-color: black;
}
<div class="outer_container">
<div class="internal_alignment">
<div class="main_container">
<div class="column_outside"></div>
</div>
</div>
</div>
After a second thought, simply use left: 100% instead of right: -200px;
.outer_container {
overflow: hidden;
position: relative;
}
.internal_alignment {
position: relative;
max-width: 980px;
margin: 0px auto;
}
.main_container {
height: 500px;
background-color: bisque;
}
.column_outside {
position: absolute;
top: 0px;
left: 100%;
height: 500px;
width: 200px;
background-color: black;
}
<div class="outer_container">
<div class="internal_alignment">
<div class="main_container"></div>
<div class="column_outside"></div>
</div>
</div>
Very simple:
.column_outside {
right: 0px;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
}
Demo https://jsfiddle.net/n4nq6Lxt/
No need to change your HTML structure.
You can use transform: translateX(100%); what it does is to move the element to the right of the amount of the width of the element itself.
right: 0;
transform: translateX(100%);
I have this http://jsfiddle.net/116ea4wx/ , I want to div #areaEditor in front of div .dcEditor when I zoom to 1.5 scale.
<div id="areaEditor">
<div class="dcEditor" id="idEditor">
<canvas id="cEditor"></canvas>
</div>
</div>
#areaEditor {
position: relative;
width: 100%;
min-height: 500px;
border: 1px solid #eee;
}
.dcEditor {
width: 332.64px;
height: 200.34px;
/* margin: 0 auto; */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background:#222;
}
#cEditor {
width: 332.64px;
height: 200.34px;
}
I have try with z-index:-2; on absolute to .dcEditor, but background on div .dcEditor still visible and text on canvas can't selection.