CSS Relative Positioning Not Working

问题

For some reason I cannot get my image to position to the right of the Twitter feed. I positioned it relatively within the DIV tags of the twitter feed, but it remains below. Here is the live link: http://www.lymemd.org/indexmm6.php

My CSS:

#twitterfeed {
    position: relative;
}

#drshow {
    position: relative;
    left: 200px;
}

My HTML:

<div id="twitterfeed">
<a class="twitter-timeline" width="460" height="250"  href="https://twitter.com/Lyme_MD" 
data-widget-id="453198382664667137">Tweets by @Lyme_MD</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s); js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div id="drshow">
<img src="images/drshow.gif" alt="Diane Rehm Show Image" width="169" height="145">
</div>

</div>

回答1:

Adding display:inline-block seems to fix it:

#drshow { position: relative; display:inline-block }

回答2:

Why not use floats?

.twitter-timeline {
    float: left;
}

#bannerArea {
    clear: left;
}

Not sure if the #bannerArea is where you want to clear, but it's a start! One major advantage is that the layout will adjust if the visitor's screen is too narrow to display both horizontally. You can also apply the float to other major elements, and you don't need to worry about relative or absolute positioning.

回答3:

If #twitterfeed is position:relative, #drshow must be position:absolute to achieve this.

#drshow {
    position: absolute;
    top: 0px;
    left: 30px;
}

来源：https://stackoverflow.com/questions/22924662/css-relative-positioning-not-working

标签

html

css

css-position