[ANSWERED] html – CSS Calc with TOP attribute does not work

Question 1

Use this below code to achieve your need

<!DOCTYPE html>
<html>
<head>
    <title>Position</title>
    <style type="text/css">
        #tab_position_1 {
            width: 20px;
            height: 100px;
            position: fixed;
            background: #999999;
            cursor: pointer;
            color: white;
            right:0;
            top: calc(50% + 100px);
            z-index: 4;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        #tab_position_2 {
            width: 20px;
            height: 100px;
            position: fixed;
            background: #999999;
            cursor: pointer;
            color: white;
            right:0;
            top: calc(50% + 200px);
            z-index: 4;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        #tab_position_3 {
            width: 20px;
            height: 100px;
            position: fixed;
            background: #999999;
            cursor: pointer;
            color: white;
            right:0;
            top: calc(50% - 100px);
            z-index: 4;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        #tab_position_4 {
            width: 20px;
            height: 100px;
            position: fixed;
            background: #999999;
            cursor: pointer;
            color: white;
            right:0;
            top: calc(50% - 200px);
            z-index: 4;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
    </style>
</head>
<body>
<div id="tab_position_1"></div>
<div id="tab_position_2"></div>
<div id="tab_position_3"></div>
<div id="tab_position_4"></div>
</body>
</html>

Question 2

I know CSS calc works for an example like:

width: calc(100% - 100px);

But it doesn’t seem to work with the “top” attribute, like:

top: calc(50% + 100px);

The object is stuck near the top of the page.

My full CSS is:

#tab_position_1 {
    width: 20px;
    height: 100px;
    position: fixed;
    background: #999999;
    cursor: pointer;
    color: white;
    right:0;
    top: calc(50% + 100px);
    z-index: 4;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

I have a cluster of 4 tabs that I would like to space on the edge of the page at 50% +100px, +200px, -100px, -200px, so that as the screen size changes, the cluster stays centered. I know I can do this through javascript, but would like to know if I can do this through CSS and Calc?

Is there a way this can be done with CSS/Calc for the TOP attribute?

Bollate

[ANSWERED] html – CSS Calc with TOP attribute does not work

By

Solution 1 :

Problem :

Comments

Comment posted by Anthony McGrath

Comment posted by hder

Comment posted by w3schools.com/cssref/tryit.asp?filename=trycss_position_top

Comment posted by hder

Comment posted by Anthony McGrath

By

Related Post

[ANSWERED] html – Child div has an offset border

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] problem in selecting list item in html/css

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate