I am using lots of divs that have absolutely positioned children divs inside them.
What I am trying to do is put a border inside the div but to not interact with the absolute positioned elements inside.
(almost like a floating border)
I've tried using outline but that doesn't work as it really need it inside the .box divs
I've also tried box shadow inset but this still moves the content.
Is there any way for me to do this?
.box {
height:200px;
width:100px;
background:red;
border-collapse: collapse;
position:relative;
display:inline-block;
}
.box:hover {
border:22px solid black;
border-collapse: collapse;
box-sizing:border-box;
}
.silly {
color:#ffffff;
position:absolute;
left:0px;
top:0;
}
.silly1 {
color:#ffffff;
position:absolute;
left:30px;
top:160px;
}
.silly2 {
color:#ffffff;
position:absolute;
right:0;
top:90px;
}
.silly3 {
color:#ffffff;
position:absolute;
left:10px;
top:40px;
}
<div class="box">
<div class="silly">I am box</div>
<div class="silly1">1</div>
<div class="silly2">2</div>
<div class="silly3">3</div>
</div>
<div class="box">
<div class="silly">I am box</div>
<div class="silly1">1</div>
<div class="silly2">2</div>
<div class="silly3">3</div>
</div>
<div class="box">
<div class="silly">I am box</div>
<div class="silly1">1</div>
<div class="silly2">2</div>
<div class="silly3">3</div>
</div>
here is the DEMO
Add an extra child div inside of the .box element and apply the current .box:hover styling to it. Make sure this new child div is position:absolute to remove it from the 'flow'.
As an aside, I tend to apply box-sizing: border-box; to all elements using the * selector.
*{
box-sizing: border-box;
}
.box {
height:200px;
width:100px;
background:red;
border-collapse: collapse;
position:relative;
display:inline-block;
}
.border{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.box:hover .border {
border:22px solid black;
}
.silly {
color:#ffffff;
position:absolute;
left:0px;
top:0;
}
.silly1 {
color:#ffffff;
position:absolute;
left:30px;
top:160px;
}
.silly2 {
color:#ffffff;
position:absolute;
right:0;
top:90px;
}
.silly3 {
color:#ffffff;
position:absolute;
left:10px;
top:40px;
}
<div class="box">
<div class="border"></div>
<div class="silly">I am box</div>
<div class="silly1">1</div>
<div class="silly2">2</div>
<div class="silly3">3</div>
</div>
create a container for your box and add position: relative to it, instead of adding it to box:
.box-container {
position:relative;
}
.box {
height:200px;
width:100px;
background:red;
border-collapse: collapse;
display:inline-block;
}
.box:hover {
border:22px solid black;
border-collapse: collapse;
box-sizing:border-box;
}
.silly {
color:#ffffff;
position:absolute;
left:0px;
top:0;
}
.silly1 {
color:#ffffff;
position:absolute;
left:30px;
top:160px;
}
.silly2 {
color:#ffffff;
position:absolute;
right:0;
top:90px;
}
.silly3 {
color:#ffffff;
position:absolute;
left:10px;
top:40px;
}
<div class="box-container">
<div class="box">
<div class="silly">I am box</div>
<div class="silly1">1</div>
<div class="silly2">2</div>
<div class="silly3">3</div>
</div>
</div>
Related
How can I make this line(see picture) with CSS?
Using pseudo element as :after
div{
height:80px;
width:3px;
background:black;
border-radius: 23%;
position:relative;
}
div:after{
content:'';
height:3px;
width:170px;
background:black;
border-radius: 23%;
position:absolute;
top:47%;
}
<div></div>
No need complex code, one element and few CSS lines are enough:
.line {
width:200px;
height:100px;
border-left:5px solid;
background:linear-gradient(#000,#000) center/100% 5px no-repeat;
}
<div class="line">
</div>
Or like this:
.line {
width:200px;
height:100px;
padding:48px 0;
box-sizing:border-box;
border-left:5px solid;
background:#000 content-box;
}
<div class="line">
</div>
.line1 {
height:150px;
width:3px;
background:#000;
position:relative;
}
.line2 {
height:5px;
width:300px;
background:#000;
position:absolute;
/* following 2 code is excellent center for second line. */
top:50%;
transform:translateY(-50%);
}
<div class="line1">
<div class="line2"></div>
</div>
In my web application, I wanted to place a small div along border edge of another div like this:
This is my code:
<div style="border:1px solid black; height:1em; width:10em;">
<div style="border:1px solid black; display:inline-block; height:10em;
width:10em;"> Along edge </div>
</div>
How can it be done?
Following way you can do it. Make main div position:relative and along edge div position:absolute to main div. And give top and right to sub div.
.main{
border:2px solid;
position:relative;
width:400px;
height:150px;
top:50px;
}
.sub{
border:1px solid;
position:absolute;
right:10px;
top:-10px;
z-index:99;
background-color: #fff;
}
<div class="main">
Main Div
<div class="sub">
along edge
</div>
</div>
Hope it helps.
put css like this
.main-div
{
position:relative;
}
.along-edge
{
position:absolute;
right:50px;
top:-20px;
z-index:1;
}
Check this fiddle
<div id="Main">
<div id="Edge"></div>
</div>
and css
#Main{
width:200px;
height:200px;
border:solid 1px black;
position:relative;
margin-top:50px;
}
#Edge{
width:50px;
height:50px;
border:solid 1px black;
position:absolute;
top:-25px;
right: 50px;
}
demo
Nest the smaller div inside the main div.
.along-edge {
position: absolute;
margin-top: -10px;
z-index: 1;
}
I have 3 seperate portion in page. Each should scroll individually. And if we scroll entire page every div should scroll.
How to achieve that. Following is fiddle for that http://jsfiddle.net/qLonzsvj/
html{
overflow-x:hidden;
}
.left-column
{
float:left;
width:30%;
}
.right-column
{
float:right;
width:30%;
}
.center-column
{
margin:auto;
width:30%;
}
I think this is what you are looking for.
CSS
html, body {
height: 100%;
position:relative;
}
body
{
background:#00253f;
line-height:100px;
text-align:center;
}
.left
{
position:absolute;
margin-left:5%;
margin-top:3%;
display:block;
height:80%;
width:20%;
background:#ddd;
overflow:scroll;
}
.center
{
position:absolute;
margin-left:25%;
margin-top:3%;
display:block;
height:80%;
width:50%;
background:#ccc;
overflow:scroll;
}
.right
{
position:absolute;
margin-left:75%;
margin-top:3%;
display:block;
height:80%;
width:20%;
background:#ddd;
overflow:scroll;
}
HTML
<div class="left"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
<div class="center"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
<div class="right"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
Check demo here
jsfiddle
A few things need to be changed to allow this to work I made a little mock up on jsfiddle you need to give the boxs a defined height and an overflow property of scroll. Also you do not need to float your boxes all willy nilly to make this happen.
:::EDIT:::
Updated Js Fiddle for page scrolling
http://jsfiddle.net/kriscoulson/qLonzsvj/2/
*{
box-sizing: border-box;
}
.cols {
float:left;
width:33%;
overflow: scroll;
height:30px;
}
.left-column{
background: red;
}
.center-column{
background: blue;
}
.right-column{
background: green;
}
<div id="container">
<div class="cols left-column">
<div>div1</div>
<div>div1</div>
<div>div1</div>
</div>
<div class="cols center-column">
<div>div2</div>
<div>div2</div>
<div>div2</div>
</div>
<div class="cols right-column">
<div>div3</div>
<div>div3</div>
<div>div3</div>
</div>
I want the div #under_child_above_parent under #child but above #parent and above #under_all. Is this possible with this HTML formatting? Because I need to have it formatted like this due to easier positioning of a complicated thing within child.
#under_all {
width:100%;
height:100px;
background-color:blue;
z-index:2;
}
#under_child_above_parent {
width:100%;
height:50px;
position:absolute;
left:0;
top:0;
color:white;
background-color:red;
z-index:3;
}
.objectwithinobject {
width:50%;
height:50%;
position:absolute;
left:25%;
top:100;
}
#parent {
background-color:green;
z-index:1;
}
#child {
background-color:grey;
color:yellow;
z-index:4;
}
<div id="under_all">
</div>
<div id="under_child_above_parent">
Has to go above #under_all (blue), under#parent (green) and under #child (grey).
</div>
<div id="parent" class="objectwithinobject">
<div id="child" class="objectwithinobject">
</div>
</div>
You could achieve this by removing the z-index:1; from #parent div.
#under_all {
width:100%;
height:100px;
background-color:blue;
z-index:2;
}
#under_child_above_parent {
width:100%;
height:50px;
position:absolute;
left:0;
top:0;
color:white;
background-color:red;
z-index:3;
}
.objectwithinobject {
width:50%;
height:50%;
position:absolute;
left:25%;
top:0px;
}
#parent {
background-color:green;
}
#child {
background-color:grey;
color:yellow;
z-index:4;
}
<div id="under_all">
</div>
<div id="under_child_above_parent">
Has to go above #under_all (blue), under#parent (green) and under #child (grey).
</div>
<div id="parent" class="objectwithinobject">
<div id="child" class="objectwithinobject">
</div>
</div>
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
Is it not possible to have the left and right side of an element as overflow:hidden, and the top and bottom as overflow-visible?
Once I add hidden to either overflow property, they both get cut off from the outer container.
I'm trying this but no luck: http://jsfiddle.net/dmGXY/
<div id="outer" style="overflow-x:hidden;overflow-y:visible;">
<div id="left"></div>
<div id="top"></div>
</div>
<style>
#left,#top {
position:absolute;
border:solid black 2px;
width:100px;
height:100px;
}
#left {
margin-left:-30px;
}
#top {
margin-left:100px;
margin-top:-30px;
}
#outer {
position:absolute;
top:70px;
left:100px;
width:300px;
height:200px;
border:solid 2px red;
}
</style>
You cant hide one and show the other however you can use another container as a "mask" to achieve the same effect
<div id="outer">
<div id="inner">
<div id="left"></div>
<div id="top"></div>
</div>
</div>
#left,#top {
position:absolute;
border:solid black 2px;
width:100px;
height:100px;
}
#left {
margin-left:-30px;
}
#top {
margin-left:100px;
margin-top:-30px;
}
#inner {
position:absolute;
top:70px;
left:0;
width:300px;
height:200px;
border:solid 2px red;
}
#outer {
position:absolute;
top:0;
left:100px;
width:304px;
height:100%;
border:solid 2px green;
overflow: hidden;
}
You can see the output here:
http://jsfiddle.net/LB2bg/