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.
Related
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>
I need to put the image in the parent container. The image is larger than the parent's size, need to scale the height of the parent and hide everything oversized. The width of the parent is not explicitly defined, there is only the height calculated using Calc. Don't want to use background:url, because image will use area map
.container
{
height: calc(100vh - 56px);
overflow: hidden;
}
.container img
{
height: auto;
max-height: 100%
}
HTML
<div class="container">
<img src="/img/spec3/panel.png" />
</div>
better option to give it object-fit: cover as well
.container
{
height: calc(100vh - 56px);
overflow: hidden;
border: 5px solid red;
position: relative;
}
.container img
{
display: block;
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg" />
</div>
Here is solution
.container
{
height: calc(100vh - 56px);
overflow: hidden;
position: relative;
margin: 0;
}
.container img
{
display: block;
position: absolute;
top: 50%;
left: 50%;
max-height: 100%;
transform: translate(-50%, -50%);
}
Is it possible to anchor a textarea to an image that is centered in the middle of the page, so that it doesn't move out of the image when the screen size changes?
Example on jsfiddle: https://jsfiddle.net/rxg7t2ca/1/
.container {
width: 60%;
margin: 0 auto;
/* border: 2px solid blue; */
}
#cat {
display: block;
margin: 0 auto;
}
.box1 {
position: relative;
top: -250px;
left: 30px;
width: 100px;
height: 100px;
}
<div class="container">
<img src="http://i.imgur.com/a2Wd9D2.jpg" height=300px id="cat" />
<textarea class="box1"> This is a text box </textarea>
</div>
.container {
position: relative;
width: 60%;
margin: 0 auto;
border: 2px solid blue;
}
#cat {
width: 100%;
object-fit: cover; /* 1 */
vertical-align: bottom; /* 2 */
}
.box1 {
position: absolute; /* 3 */
top: 50%; /* 3 */
left: 50%; /* 3 */
transform: translate(-50%, -50%); /* 3 */
width: 100px;
height: 100px;
}
<div class="container">
<img src="http://i.imgur.com/a2Wd9D2.jpg" height=300px id="cat" />
<textarea class="box1"> This is a text box </textarea>
</div>
Explanations:
Why isn't object-fit working in flexbox?
Mystery white space underneath image tag
Element will not stay centered, especially when re-sizing screen
In the container use 'position:relative', and in the textarea and in the image use 'position: absolute'.
CSS absolute property: The element is positioned relative to its first positioned (not static) ancestor element.
.container{
width: 60%;
margin: 0 auto;
position:relative;
/* border: 2px solid blue; */
}
#cat{
position: absolute;
top: 0px;
left: 0px;
display: block;
margin: 0 auto;
}
.box1{
position: absolute;
top: 25px;
left: 30px;
width: 100px;
height: 100px;
}
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%);