<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>锚点位置偏移</title> <style type="text/css"> body { } div { background-color: #fff; position: relative; } .text { width: 50%; height: 100px; margin: 10px; border-radius: 5px; border: 1px solid #f00; background-color: #ccc; } .arrowTip { border: 5px solid #ccc; border-color: transparent transparent #ccc transparent; width: 0px; line-height: 0px; height: 0px; position: absolute; display: block; } .top { left: 40px; top: -10px; border-color: transparent transparent #ccc transparent; } .left { border-color: transparent #ccc transparent transparent; left: 0px; top: 30px; } .right { border-color: transparent transparent transparent #ccc; left: 50%; top: 30px; margin-left: 12px; } .bottom { border-color: #ccc transparent transparent transparent; left: 50px; bottom: -10px; } .clear { clear: both; } </style> </head> <body> <div> <span class="arrowTip top"></span> <div class="text">top 底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div> </div> <div class="clear"></div> <div> <span class="arrowTip left"></span> <div class="text">left 底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div> </div> <div class="clear"></div> <div> <span class="arrowTip right"></span> <div class="text">right 底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div> </div> <div> <span class="arrowTip bottom"></span> <div class="text">bottom 底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div> </div> </body> </html>