Let's say I have an SVG element
SVGArea
And after it I have an img div containing an Icon
IconImg
The structure is like :
<div id="svgArea">
<svg>
#SOMETHING
</svg>
<div id="imgIcon">
<img src={IconImg} >
</img>
</div>
</div>
On click, the Icon image is placed somewhere in the SVG (according to computed w and y positions).
The problem : the Icon moves each time I scroll up or down or I zoom in/out. The element doesn't seem to stay fixed or sticky. And I have trid all what I have found in internet :
#IconImg{top:0; position:sticky // or fixed}
#SVGArea{position : relative}
And there is no parent with hidden-flow attribute.
How can I fix that I have my Icon stay in place what ever the scrool or zoom ? Thank you for you thoughts and answers for help.
Related
I'm trying to have some elements of design positioned absolutely relative to the page's background but not affecting the page layout (scroll and page height must remain dependent only on the page's contents).
Let say, placing two squares square1 and square2, potentially overflowing on the page's width and maybe below the page's contents.
I've played with the following HTML:
<div id="background">
<div id="inner">
<div id="square1">
</div>
<div id="square2">
</div>
</div>
</div>
<main>
<!-- main content goes here, can be arbitrary HTML -->
<canvas height="1000px" width="10" style="background:red;"></canvas>
</main>
Both with attempts at CSS position: absolute of the squares inside a position: relative background div and overflow: hidden on the inner div ; but also playing with only margin-based positioning, I always end up with the "background" overflowing below the main content. Are there alternatives approach to achieve what I'm trying to do ?
To be more explicit, on this JS fiddle https://jsfiddle.net/1ktfyna4/2/ I'm trying to have the page stop scrolling at the bottom of the red line, while still showing the top of the yellow rectange.
I made it simply using display: flex on the outward-most container, with both the content div and background div inside.
See https://jsfiddle.net/m8pk45re/1/
I am creating a website and am working on a hover animation for CSS.
<html>
...
<body>
<div id ="outer_container">
<div id="inner_container">
<img id="imageOne"/>
</div>
</div>
...
</body>
<html>
outer_container takes up the width of the page
inner_container is a child of outer_container and is aligned in the center of it vertically.
The CSS animation displays a hidden element named 'blur' which is basically a background color block that takes up the width and height of the image. On hover "blur" appears on top of the <img/> tag inside of the inner_container div.
Unfortunately the block element "blur" is placed over the top of the the image tag using :
"position : relative / position : absolute"
causing it to interfere with the display : inline-block used to align the inner_container div with the outer_container div.
I'm looking for a solution that would allow the hidden element to be displayed on top of the <img/> tag in the inner_container div without using
"position : relative / position : absolute"
so that I can still align the inner_container div inside of the outer_container div.
The actual page code can be found here
Give each element a z-index value: elements with higher z-index appear 'in front of' elements with a lower z-index.
So :
blur{
z-index:0;
}
img,inner-container{
z-index:2;
}
Not sure, but if you want outer-container 'behind' give it a z-index of -2.
I have the following HTML with a canvas embedded in a fieldset. Why does the fieldset and canvas with overflow the enclosing div dimensions? I basically want the fieldset and canvas to reside within the dimensions of the enclosing div. If I remove the "canvas" element, then it sizes properly. What am I not understanding here/
<body>
<div id="commandGrp" style="position:relative;float:left;width:100px;height:100px">
<fieldset><legend>Commands</legend>
<canvas id="CommandCanvas" >
</canvas>
</fieldset>
</div>
</body>
Here is a screenshot with the Chrome element inspector so you can see the div size. You can see the div#commandGrp div is the size I defined it but the enclosing fieldset and canvas are way bigger.
I'm afraid it's down to the HTML specification and default sizes on canvas. See this similar Stack Overflow question for links and solutions.
canvas default size
I am trying to set up a simple css transition where there is a mask over an item and when the user hovers over the item the mask opacity goes to 0 and the item is fully visible. The problem I have is that when I place the mask in the item, for example:
<div class="tile">
Home
<div class="mask"></div>
</div>
<div class="tile">
About
<div class="mask"></div>
</div>
The mask moves down to the other element. So for example, the mask from the "home" tile moves down to the about tile and the mask from the "about" tile moves down to whatever is after that. How do I fix this? Thanks!
Here is the js fiddle of this: http://jsfiddle.net/5bL8H/
You can do it very easily with the magic of absolute inside relative:
.tile {position:relative;}
.tile .mask {position:absolute;left:0;right:0;top:0;bottom:0;}
You can also remove the height and width - the right and bottom values will take care of that.
Example: http://jsfiddle.net/5bL8H/2/
I have a div that contains a smaller div with some text. The container div has a webkit transition that moves it off the screen. I want the smaller div to move with it, until it gets to the edge of the page, then remain fixed, almost as if it gets 'stuck' on the side of the page, while the container div continues to move underneath it out of sight. Can this be done?
//CSS
.move{
-webkit-transition-property:left;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-duration:1s;
left:-200px;
}
//HTML
<div onclick="this.className='move'">
<div>
some text here
</div>
</div>
Here's an example for you: http://jsfiddle.net/LjjRM/
A couple points:
1.) jQuery
2.) position: absolute