Does anyone now how to make a DIV inside another DIV that is scroll-able fixed, so that no matter how much I scroll by, the DIV always stays in the same place?
Any help would be greatly appreciated.
Try this out:
<style type="text/css">
.scrollable {
width: 200px;
height: 200px;
background: #333;
overflow: scroll;
}
.fixed {
position: absolute;
top: 180px;
width: 200px;
height: 20px;
background: #fa2;
}
</style>
<div class="scrollable">
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
<div class="fixed">and I'm fixed</div>
</div>
I would recommend absolutely positioning the div over the scrollable div. It wont be in the scrollable div, because it doesn't need to be.
Fixed div in scrollable div
#container {
position:absolute;
top:150px;
left:150px;
width:600px;
height:500px;
overflow:hidden;
border:3px dashed #ffff00;
padding:0px;
}
#this_scroll {
position:absolute;
top:0px;
right:0px;
width:99%;
height:99%;
overflow:scroll;
border:2px solid #000;
margin:1px;
background:#B0BDCE;
}
#fix_close {
position:absolute;
top:2px;
right:21px;
width:90px;
height:30px;
overflow:hidden;
border:2px solid #660099;
z-index:10;
background:#8C8C8C;
}
<div id="container">
<div id="this_scroll">
<p>some yxyxyx</p><p>some yxyxyx</p>
</div>
<div id="fix_close">
close
</div>
</div>
Related
This question already has answers here:
Double border with different color [duplicate]
(8 answers)
Closed 8 months ago.
I want create this type gallery. I have multiple images in it. So when I hover on it then images should changes automatically.
Now I'm facing one issue i.e. How to add two borders like this using css or any other style-sheet.
You can add some box-shadow together. The first one is gray. The second one is white as a border with a one-pixel movement than the previous.
body{
background:#efefef;
}
.wrapper {
position: relative;
padding:10px;
}
.image {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
box-shadow: 5px -5px 0 gray,6px -6px 0 white,11px -11px 0 lightgray,12px -12px 0 white;
}
<div class="wrapper">
<div class="image"></div>
</div>
It can be done with three elements. One element is the image itself, and it has a tiny 1px white border. Then there are two elements behind the image that have grey background and also white border.
Look at this example, pretty much the same, just change the div with class image for an actual img element and invert the positioning and you are ready to go.
.wrapper {
position: relative;
}
div {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
}
.first {
left: 5px;
top: 5px;
z-index: -1;
background-color: #777;
}
.second {
left: 10px;
top: 10px;
z-index: -2;
background-color: #AAA;
}
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="image"></div>
</div>
try this
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:black;
}
.imageContainer{
display:inline-block;
position:relative;
width:100px;
height:100px;
top:200px;
left:200px;
padding:50px;
background: url("https://media.cntraveller.com/photos/611bf0b8f6bd8f17556db5e4/1:1/w_2000,h_2000,c_limit/gettyimages-1146431497.jpg") no-repeat center center/cover;
}
.divOne{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-6px;
left:6px;
z-index:-1;
}
.divTwo{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-10px;
left:10px;
z-index:-1;
}
</style>
</head>
<body>
<div class="imageContainer">
<div class="divOne"></div>
<div class="divTwo"></div>
</div>
</body>
</html>
I made a mobile web page using IScroll.
The composition of the web page is as follows.
HTML
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item">
<div class="disable">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
CSS
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
If you run the code above,
You can scroll by raising the cursor to A and B.
On mobile, you can scroll using touch.
But, So if you raise your cursor over a DIV with Aqua background color and scroll,
I can't scroll.
The DIV, "Position:Fixed," is...
Since the height is 100%, I don't think there's a scroll event.
For your information, Item needs a Click event.
So the "Pointer-Events: None" property is not allowed.
The "Trigger" function can't even give you an event.
Give me an idea.
https://jsfiddle.net/kasthe/b3w2hpn1/3/
Apply pointer-events: none to just the class=disable div. div class=item is still clickable.
$(".wrap").css("height", $(document).height() + "px");
console.log($(".wrap").height())
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item" onclick="alert('item clicked')">
<div class="disable" style="pointer-events:none">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
This is my div structure
<div id="outer">
<div class="inner">
<div>
<div class="item"></div>
</div>
<div class="itemBelow">
<div class="innerBelow"></div>
</div>
</div>
</div>
#outer{ /*parent and children - rotateable*/
top:10px;
width:220px;
height:50px;
position: absolute;
background:blue;
}
.inner{
top:35px;
width:200px;
height:75px;
position: relative;
background:green;
}
.item{
top:60px;
width:180px;
height:100px;
position: absolute;
z-index: 4; /*to be top most div*/
display: block;
background:red;
}
.itemBelow{
top:160px;
width:160px;
height:120px;
position: relative;
background:pink;
}
.innerBelow{
top: 105px;
width:140px;
height:140px;
position: relative;
display: block;
z-index: 1; /*to be lowest div*/
background:lime;
}
I'm trying to rotate #outer div and its children.
$('#btn').click(function(){
$('.outer').css({
'-webkit-transform': 'rotateZ(45deg)',
'-msTransform': 'rotateZ(45deg)',
'transform': 'rotateZ(45deg)',
});
});
But how can I maintain the z-index order after rotation? I expect the output to remain in the below z-index order before and after #outer is rotated.
item //top div
stillObj //second highest div
innerBelow //lowest div
I have created a mockup. See Fiddle
I have googled and come across many post like z-index and transform, transform-translate3d. But I'm unable to make this work.
You can use the css property transform-style to keep your 'stacking order' or z-index when using css3 3d transforms.
You can see in this fiddle, even when transformed, the element (.item) retained it's z-index value relative to the .stillObj.
You have to apply transform-style to both elements that need to retain their z-index and will also be 'interacting' with a 3d transform.
Here is an example of some of the types of structuring/class changes you'd have to make to your specific example in orderto keep the z-index values sticking: Fiddle.
It seems as if you need to put preserve-3d on the elements themselves (that will have a 3d transform), not their parents in order to preserve the stacking order.
$('#btn').click(function(){
$('.item').toggleClass('rotate');
});
.stillObj{
height: 450px;
width: 30px;
background: #666;
z-index:2;/*to be second height div*/
position: relative;
}
#outer{ /*parent and children - rotateable*/
top:10px;
width:220px;
height:50px;
position: absolute;
background:blue;
}
.inner{
top:35px;
width:200px;
height:75px;
position: relative;
background:green;
}
.item{
top:60px;
width:180px;
height:100px;
position: absolute;
z-index: 4; /*to be top most div*/
display: block;
background:red;
}
.itemBelow{
top:160px;
width:160px;
height:120px;
position: relative;
background:pink;
}
.innerBelow{
top: 105px;
width:140px;
height:140px;
position: relative;
display: block;
z-index: 1; /*to be lowest div*/
background:lime;
}
#btn{
margin-bottom: 50px;
float: right;
width: 200px;
height: 60px;
}
.rotate {
-webkit-transform: rotateZ(15deg);
transform: rotateZ(15deg);
}
.item, .stillObj {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="btn">Click</button>
<div class="stillObj"></div>
<div id="outer">
<div class="inner">
<div>
<div class="item"></div>
</div>
<div class="itemBelow">
<div class="innerBelow"></div>
</div>
</div>
</div>
So I've been playing around with my code for some time now, and I still am
not able to get the div elements to properly center themselves along the bottom of my canvas element. The code I have so far gets me relatively close, but it is not quite there. I've posted the relative css snippets below, if anyone can give me some direction I would be really appreciative.
#shapeCanvas {
width:800px;
height:650px;
border:1px solid #000000;
display:block;
margin: 0 auto;
}
.styleDiv {
color:#FFFFFF;
font-family:"Verdana";
background-color:#36648b;
border:2px solid #000000;
border-radius:5px;
padding:5px;
display:inline-block;
width:150px;
height:25px;
}
Add a container div, also inline-block, and give it text-align: center. This will make sure all your inline-block divs are anchored at the center of the page.
#container {
text-align: center;
display: inline-block;
}
#shapeCanvas {
width:800px;
height:650px;
border:1px solid #000000;
display:block;
margin: 0 auto;
}
.styleDiv {
color:#FFFFFF;
font-family:"Verdana";
background-color:#36648b;
border:2px solid #000000;
border-radius:5px;
padding:5px;
display:inline-block;
width:150px;
height:25px;
text-align: center;
}
<div id="container">
<div id="shapeCanvas"></div>
<div class="styleDiv"></div>
<div class="styleDiv"></div>
<div class="styleDiv"></div>
</div>
<div style="width: 600px;">
<div class="header">
<img src="logo.png"/>
</div>
<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
<div class="div4">Div 4</div>
<div class="div5">Div 5</div>
</div>
.header
{
height:200px;
background-image: url('http://www.imgur.com/YLVpI.png');
margin:0;
width:100%;
background-position:left;
}
.header img
{
margin-left:auto;
margin-right:auto;
}
.container .div1
{
background-color: black;
background-position:left;
float:left;
width:20%;
margin: 0px;
}
.container .div2
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
float:left;
width:100px;
margin:0; padding:0;
border-bottom-left-radius: 20px;
}
.container .div3
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
float:left;
margin:0; padding:0;
}
.container .div4
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
float:left;
width:100px;
margin:0; padding:0;
border-bottom-right-radius: 20px;
}
.container .div5
{
background-color: black;
float:left;
display:inline-block; width:90px;
width:20%;
margin:0;
}
There are several things I cannot get to work simultaneously:
Make the header span 100% of the page width.
Make div 2 and 4 a set width of 30px each.
Make div 3 a set width of 400px.
Make div 1 and 5 fill the remaining space regardless of how big the window is.
Center everything so it looks nice.
Make the background align correctly.
Does anyone know how to do this? http://jsfiddle.net/jaTuu/
As far as I can tell, you solved 5 on your own, and as far as I know, without extraneous stuff, you need Javascript to do number 4. I cannot attempt 6 without access to your images. Nevertheless, I think you can resolve that on your own.
Below is the solution I came up with given your code:
<div id="header_container" style="width: 600px;">
<div class="header">
<img src="logo.png"/>
</div>
<div class="container"><div class="div1">Div 1</div><div class="div2 width30">Div 2</div><div class="div3 width300">Div 3</div><div class="div4 width30">Div 4</div><div class="div5">Div 5</div>
</div>
*
{
padding:0;
margin:0;
}
#header_container {
background-color: #000;
min-width: 100%;
}
.width30 {
width: 30px;
}
.width300 {
width: 300px;
}
.header
{
height:200px;
background-image: url('http://www.imgur.com/YLVpI.png');
margin:0;
background-position:left;
}
.header img
{
margin-left:auto;
margin-right:auto;
}
.container
{
text-align:center;
}
.container .div1
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
display:inline-block;
background-color: yellow;
width:90px;
border-bottom-left-radius: 20px;
}
.container .div2
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: purple;
display:inline-block;
/*width:90px;*/
margin:0; padding:0;
}
.container .div3
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: green;
display:inline-block;
/*width:90px;*/
}
.container .div4
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: blue;
display:inline-block;
/*width:90px;*/
}
.container .div5
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: orange;
display:inline-block;
width:90px;
border-bottom-right-radius: 20px;
}
A couple things to note here:
Assuming that you want the element names to remain distinct, you can modify the width of the items by adding classes which define sizes as per the above. If you do so, as I did, you will have to remove the widths of the elements as you define them in the CSS (also shown above).
One more note: it seems as though you are attempting to do a navigation menu. If that is the case, it may be a better idea to use lists to represent the items.
Try to centering all background images.
background: url('http://www.imgur.com/YLVpI.png') center center;
Like this demo: http://jsfiddle.net/ongisnade/PThcc/