css - How to set the 'left' property of my div using css3 calc?

Question

I am trying to set the left property of a div in an exact location depending on the width of its parent.

Specifically I want the 'left' property to be its parent width - 350px.

I am trying to use css3's calc like this (left: calc(100% - 350px)) to no avail. This probably is because 100% is looking at the left property instead of the parent's width...

Is this possible at all or what am I doing wrong?

Thanks

<div id="login5" class="login">
    <h3>Login</h3>

    // code 

</div>

Then in my css:

#login5 {
    position: absolute;
    width: 260px;
    left: calc(100% - 350px);
    background-color: rgba(50, 50, 50, 0.6);
    padding: 20px;
    }

Answer 1

它应该可以工作（在 Chrome/Safari/Firefox/IE9+ 上）：http: //jsfiddle.net/GXbJT/

根据Can I Use，Opera 不支持它。基于 WebKit 的浏览器仍然需要特定于供应商的前缀：

left:-webkit-calc(100% - 350px);
left:-moz-calc(100% - 350px);
left:calc(100% - 350px);

Answer 2

测试：

transform: translateX(25px);

然后将标签向右移动，或者

transform: translateX(-25px);

然后你向左移动。

Answer 3

我将左侧属性更改为宽度，只需检查它。

 #login5 {
    position: absolute;
    width: 260px;
    width: calc(100% - 350px);
    background-color: rgba(50, 50, 50, 0.6);
    padding: 20px;
    }