Question

我的问题是这个

我有一个760px宽的大容器，里面有一个700px的小容器。现在我在文章左侧的60px容器中有社交按钮。随着人们向下滚动容器，我希望社交按钮保持在原位（因此保持对用户的视线）。我试过这个。 “位置：固定”但是这会将我的社交按钮移到左侧。一个解决方法是给他们一个像700px左边的边距。但这可能是以后的问题（并不是“好”）。

我制作了当前状态的jsfiddle（没有固定位置）

http://jsfiddle.net/MemCz/

HTML

<title>Artikel</title>


<body>

<div class="maincon">


    <div class="artikel"><h1>Amazon Fire TV review</h1><br>
    Amazon’s version of a media streamer is much like Apple’s or Roku’s: a basic black box that discreetly sits on my entertainment center. It’s a little larger and slightly thinner than the Apple TV or Roku 3, but that matters little — I just plugged the thing in and forgot about it. Aside from a small white LED on the front of the box to let me know it’s on, that’s it for alerts and design. The Fire TV isn’t expected to be a showpiece of my entertainment center, like a PlayStation 4 or Xbox One. It’s just supposed to blend into the background and do its job. Because really, this isn’t a story about hardware. This is about Amazon getting as many of its services as possible in to my living room.


Setting up the Fire TV is a breeze: once I plugged it in and put in my Wi-Fi password, it launched into a video tutorial demonstrating its many features (starring a bizarro normcore Doug Funnie character). As with its Kindle Fire tablets, Amazon preloaded my account on the Fire TV before it shipped it to me, so once the tutorial finished (you can’t skip it, I tried), all of my Amazon content was there right in front of me. Every TV show and movie I’d purchased from Instant Video, every photo I’d uploaded to Cloud Drive, all there for my consumption. (Starting next month, every song I upload to Amazon’s Cloud Player will be there too.)<br>

<h1>THE FIRE TV'S INTERFACE IS SUBDUED BUT EASY TO SEE AND CONTROL FROM THE COUCH</h1><br>
The interface will look familiar to anyone that’s used a Kindle Fire tablet: it’s a basic grid with categories on the left and content on the right. Unlike the Roku 3’s bright and colorful themes,  the Fire TV’s interface is mostly dark and understated. It’s easy to navigate and responsive thanks to the Fire TV’s powerful hardware, and most importantly, it’s easy to read from my couch. Needless to say, it’s a much better interface than anything a cable box has ever offered.

        <h1>THE FIRE TV'S INTERFACE IS SUBDUED BUT EASY TO SEE AND CONTROL FROM THE COUCH</h1><br>
The interface will look familiar to anyone that’s used a Kindle Fire tablet: it’s a basic grid with categories on the left and content on the right. Unlike the Roku 3’s bright and colorful themes,  the Fire TV’s interface is mostly dark and understated. It’s easy to navigate and responsive thanks to the Fire TV’s powerful hardware, and most importantly, it’s easy to read from my couch. Needless to say, it’s a much better interface than anything a cable box has ever offered.

</div>

<div class="social"> 
<img src="http://i.imgur.com/9PY48ir.png" width="50px" height="50px"> 
<br>  
<img src="http://i.imgur.com/U4kusEr.png" width="50px" height="50px"> 
<br>
<img src="http://i.imgur.com/Q8JpVmS.png" width="50px" height="50px"> 
</div><!-- end div social -->

</div>


</body>

CSS

    * {
    box-sizing:border-box;
    }

.maincon {
    width:670px;
    overflow: hidden;
    margin: 0 auto 0 auto;


}


.artikel {
    width:600px;
    float:left;
    padding:20px;

    font-family: "ff-tisa-web-pro";
    font-size:12pt;
  }



img {
    margin-left: 10px;
    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
    float:right;
}

.head {
    width:660px;
    height: 60px;

}

.social {

    float:left;
    width:70px;
    height:400px;
    padding-left:10px;
    padding-top:50px;

}

h1 {
  font-family: "proxima-nova";
  }

你们有任何想法如何解决这个问题吗？这里是固定位置失败的小提琴：http://jsfiddle.net/MemCz/1/

Answer 1

将CSS .social课程更新为以下内容：

.social {
    position:fixed;
    right:50px;
    width:70px;
    height:400px;
    padding-left:10px;
    padding-top:50px;
}

它会让它发挥作用。您的位置已固定，但位置固定且绝对位置可以使其与屏幕边缘保持一定距离。在这种情况下，通过使用right:50px;，您告诉浏览器从屏幕右边缘渲染社交媒体按钮50px。

请参阅更新的JSFiddle：http://jsfiddle.net/vAL2y/

Answer 2

你不需要左边的浮动，只需要添加如下内容：

position:fixed;
right:5%;

在您的容器中为社交媒体项目。我推荐％over em或px;

初学者：如何将固定元素放到左侧位置（向左浮动？） - 包括JSFiddle

2 个答案: